Question

我正在考虑在toolkitchen库中进行事件冒泡的最佳实践。我有一个带有组件的嵌套标记，在这里按下了一个按钮，它应该触发组件层次结构中的某个事件。这是一个例子，我很好奇是否有更好的方法。甚至可能是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);

Answer 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>

在toolkitchen冒泡的事件

1 个答案: