61
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

61
59
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
59

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?