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で他のタグに渡すのが良いのかなと思います。