이벤트 킬로그램 툴킷 첸

툴킷 첸 라이브러리에서 이벤트 버블 링에 대한 베스트 프랙티스가 생각납니다. 구성 요소와 중첩 된 마크 업을 가지고 있으며 어딘가에이 버튼을 누르면 구성 요소 계층의 어딘가에 이벤트가 트리거됩니다. 이것은 하나의 예이며, 더 좋은 방법이 있는지 궁금합니다. 아마도 toolkithcen lib 자체의 이벤트 시스템에 내장되어있을 수도 있습니다.이벤트 킬로그램 툴킷 첸

// In one component 
mouseClicked: function() { 

    var evt = new CustomEvent('ganttChartNewEventRequested'); 
    document.dispatchEvent(evt); 

} 

// In another component 
document.addEventListener('ganttChartNewEventRequested', function(e){ 

    alert('create new event'); 

}, false);

출처

2013-04-17 Mattias Akerman

이 방법은 작동하지만, Webcomponents, 캡슐화의 장점 중 하나 나옵니다. 질문 : 이것을 고려해 볼 때 더 좋은 방법이 있습니까? –

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
    <script src='http://toolkitchen.github.io/cdn/toolkit.min.js?shadow'></script> 
</head> 
<body> 
    <my-sink></my-sink> 

    <element name="my-source"> 
    <script> 
     Toolkit.register(this, { 
      ready: function() { 
      setTimeout(function() { 
       this.send("hello-world"); 
      }.bind(this), 500); 
      setTimeout(function() { 
       this.send("goodbye-world"); 
      }.bind(this), 1500); 
      } 
     }); 
    </script> 
    </element> 

    <element name="my-sink" on-goodbye-world="goodbyeWorld"> 
    <template> 
     <my-source on-hello-world="helloWorld"></my-source> 
     <div > 
      {{message}} 
     </div> 
    </template> 
    <script> 
     Toolkit.register(this, { 
      message: '...', 
      helloWorld: function() { 
      this.message = 'hello world'; 
      }, 
      goodbyeWorld: function() { 
      this.message = 'goodbye world'; 
      } 
     }); 
    </script> 
    </element> 

</body> 
</html>

출처

2013-04-19 11:26:49

답변

관련 문제