RIOT.JS - Có thể quan sát

Cơ chế Observables cho phép RIOT gửi các sự kiện từ thẻ này sang thẻ khác. Các API sau đây rất quan trọng để hiểu các RIOT quan sát được.

riot.observable(element)- Thêm hỗ trợ Observer cho phần tử đối tượng đã cho hoặc nếu đối số trống, một thể hiện có thể quan sát mới được tạo và trả về. Sau đó, đối tượng có thể kích hoạt và lắng nghe các sự kiện.

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

element.trigger(events) - Thực thi tất cả các hàm gọi lại lắng nghe sự kiện đã cho.

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

element.on(events, callback) - Nghe sự kiện đã cho và thực hiện lệnh gọi lại mỗi khi một sự kiện được kích hoạt.

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

Thí dụ

Sau đây là ví dụ đầy đủ.

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>

Điều này sẽ tạo ra kết quả sau: