RIOT.JS-オブザーバブル

Observablesメカニズムにより、RIOTは1つのタグから別のタグにイベントを送信できます。 RIOTオブザーバブルを理解するには、次のAPIが重要です。

* riot.observable（element）*-指定されたオブジェクト要素のObserverサポートを追加するか、引数が空の場合、新しいobservableインスタンスが作成されて返されます。この後、オブジェクトはイベントをトリガーしてリッスンできます。

var EventBus = function(){
   riot.observable(this);
}

* element.trigger（events）*-指定されたイベントをリッスンするすべてのコールバック関数を実行します。

sendMessage() {
   riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');
}

* element.on（events、callback）*-指定されたイベントをリッスンし、イベントがトリガーされるたびにコールバックを実行します。

riot.eventBus.on('message', function(input) {
   console.log(input);
});

例

以下は完全な例です。

custom10Tag.tag

<custom10Tag>
   <button onclick = {sendMessage}>Custom 10</button>
   <script>
      sendMessage() {
         riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');
      }
   </script>
</custom10Tag>

custom11Tag.tag

<custom11Tag>
   <script>
      riot.eventBus.on('message', function(input) {
         console.log(input);
      });
   </script>
</custom11Tag>

カスタム9

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom10Tag></custom10Tag>
      <custom11Tag></custom11Tag>
      <script src = "custom10Tag.tag" type = "riot/tag"></script>
      <script src = "custom11Tag.tag" type = "riot/tag"></script>
      <script>
         var EventBus = function(){
            riot.observable(this);
         }
         riot.eventBus = new EventBus();
         riot.mount("*");
      </script>
   </body>
</html>

これにより、次の結果が生成されます–

Riotjs-observables

目次

RIOT.JS-オブザーバブル

例

custom10Tag.tag

custom11Tag.tag

カスタム9