【Riot.js】タグ間で動作を連動させる #JavaScript

Riot.jsでは各タグ内で様々な挙動を実装していくのですが、タグ間で動作を連携させたいときもあります。
そういった場合はobservableを使うとスムーズになります。

まず適当にタグをいくつか用意して、あるタグから他のタグへ何かしらの通知をしてみたいと思います。
動作サンプル (JSFiddle向けに少し記述を変更しています)

呼び出し元となるhtmlが次のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Riot.js</title>
</head>
<body>
  <foo></foo>
  <bar></bar>
  <baz></baz>

  <script src="https://cdn.jsdelivr.net/riot/2.2/riot.min.js"></script>
  <script src="foo.js"></script>
  <script src="bar.js"></script>
  <script src="baz.js"></script>
  <script>
    var obs = riot.observable();
    riot.mount("foo");
    riot.mount("bar");
    riot.mount("baz");
  </script>
</body>
</html>

タグはgulpにて既に変換されたものを利用しています。
ここで

var obs = riot.observable();

というようにriotの機能であるobservableを全体のスコープで設定しています。
そして、通知を送る側のタグは次のようになっています。

<foo>
  <input type="text" oninput={onInput}>
  <script>
    this.onInput = function(e) {
      var text = e.target.value;
      obs.trigger("myEvent", text);
    };
  </script>
</foo>

inputによる入力イベントで入力された文字列を取得し、triggerによりイベントを発火、文字列も送り出しています。
最後に、通知を受け取るタグは次のようになります。

<bar>
  <input type="text" name="hoge">
  <script>
    var that = this;
    obs.on("myEvent", function(text) {
      that.hoge.value = text;
      that.update();
    });
  </script>
</bar>

<baz>
  <p>{textLength}</p>
  <script>
    var that = this;
    this.textLength = 0;
    obs.on("myEvent", function(text) {
      that.textLength = text.length;
      that.update();
    });
  </script>
</baz>

それぞれonによって任意のイベントをキャッチし、渡ってきたデータを基に処理を連動させています。
実際にはあるタグの中でobservableを定義し、mixinで他のタグに渡すのが良いのかなと思います。