Учебники

RIOT.JS — Наблюдаемые

Июль 19, 2018

Механизм Observables позволяет RIOT отправлять события из одного тега в другой. Следующие API важны для понимания наблюдаемых RIOT.

  • riot.observable (element) — добавляет поддержку Observer для данного элемента объекта или, если аргумент пуст, создается и возвращается новый наблюдаемый экземпляр. После этого объект может запускать и прослушивать события.

riot.observable (element) — добавляет поддержку Observer для данного элемента объекта или, если аргумент пуст, создается и возвращается новый наблюдаемый экземпляр. После этого объект может запускать и прослушивать события. 

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

  • element.trigger (events) — выполняет все функции обратного вызова, которые прослушивают данное событие.

element.trigger (events) — выполняет все функции обратного вызова, которые прослушивают данное событие. 

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

  • element.on (events, callback) — прослушивает данное событие и выполняет обратный вызов каждый раз, когда событие инициируется.

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>

custom9.htm 

<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>

Это даст следующий результат —

46
Share: