Событие бурлит в инструментальной кухне

Я думаю о лучших практиках для всплытия событий в библиотеке инструментов. У меня есть вложенная разметка с компонентами, и где-то здесь нажата кнопка, которая должна вызвать событие где-то в иерархии компонентов. Это пример, и мне интересно, есть ли лучший способ. Возможно, даже встроенная система событий в самой библиотеке toolkithcen.

// 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);
Источник

1 ответ 

<!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>
Источник
Другие вопросы по тегам