RIOT.JS-관찰 가능 항목

Observables 메커니즘을 통해 RIOT는 한 태그에서 다른 태그로 이벤트를 보낼 수 있습니다. RIOT Observable을 이해하려면 다음 API가 중요합니다.

riot.observable(element)− 주어진 객체 요소에 대한 옵저버 지원을 추가하거나 인수가 비어있는 경우 새로운 옵저버 블 인스턴스가 생성되고 반환됩니다. 이 후 개체는 이벤트를 트리거하고 수신 할 수 있습니다.

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>

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>

이것은 다음 결과를 생성합니다-