1

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);
4

1 に答える 1

0 
<!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-19T11:26:49.197 に答える