RIOT.JS - Observables

Le mécanisme observables permet à RIOT d'envoyer des événements d'une balise à une autre. Les API suivantes sont importantes pour comprendre les observables RIOT.

riot.observable(element)- Ajoute la prise en charge d'observateur pour l'élément objet donné ou si l'argument est vide, une nouvelle instance observable est créée et renvoyée. Après cela, l'objet est capable de déclencher et d'écouter des événements.

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

element.trigger(events) - Exécuter toutes les fonctions de rappel qui écoutent l'événement donné.

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

element.on(events, callback) - Écoutez l'événement donné et exécutez le rappel à chaque fois qu'un événement est déclenché.

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

Exemple

Voici l'exemple complet.

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>

Cela produira le résultat suivant -