Question

我使用Polymer 1.0和EcmaScript 6并使用Babel和Vulcanize进行转换。

我从一个按钮发射一个事件，但是我无法从我的模态中听到它。

当我在控制台中添加eventListner时，我可以捕获该事件。但我无法从模态中获得。

我试图将侦听器作为字符串和实际函数传递，但它没有工作。

class MyEditButton {
    beforeRegister(){
        this.is= 'my-edit-button';
        this.extends = 'button';

        this.properties = {
            myObjectId: {
                type: Number,
                value: -1,
            }
        }
        this.listeners = {
            'tap': 'taphandler'
        }
    }
    taphandler(){
        this.fire(
            'my-edit-button-clicked',
            {'my-object-id': this.myObjectId}
        )
    }
}

Polymer(MyEditButton);

这是应该听取事件的模式。

class MyModal {
    beforeRegister(){
        this.is = 'my-modal';

        this.listeners = {
            'my-edit-button-clicked': '_onButtonClick'
        };
    }

    _onButtonClick(e, details){
       console.log("Clicked!");
    }
}

Polymer(MyModal);

有人知道为什么吗？是否有＆＃34;事件范围＆＃34;或者它只向一个方向发射事件？

Answer 1

如果您的按钮是模态的子项，则事件会冒泡到模态，现有代码将起作用：

HTMLImports.whenReady(_ => {
  "use strict";

  class MyEditButton {
    beforeRegister() {
      this.is = 'my-edit-button';
      this.extends = 'button';

      this.properties = {
        myObjectId: {
          type: Number,
          value: -1,
        }
      }
      this.listeners = {
        'tap': 'taphandler'
      }
    }
    taphandler() {
      this.fire(
        'my-edit-button-clicked', {
          'my-object-id': this.myObjectId
        }
      )
    }
  }

  Polymer(MyEditButton);

  class MyModal {
    beforeRegister() {
      this.is = 'my-modal';

      this.listeners = {
        'my-edit-button-clicked': '_onButtonClick'
      };
    }

    _onButtonClick(e, details) {
      console.log("Clicked!");
    }
  }

  Polymer(MyModal);
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <my-modal></my-modal>

  <dom-module id="my-modal">
    <template>
      <h1>My Pseudo Modal Dialog</h1>
      <button id="myButton" is="my-edit-button">Click</button>
    </template>
  </dom-module>
</body>

codepen

否则，如果按钮是兄弟，则事件将冒泡到文档，跳过模式。在这种情况下，当您从按钮调用fire()时，您必须将目标节点指定为模态：

 this.fire(
    'my-edit-button-clicked',
    { 'my-object-id': this.myObjectId },
    { node: document.querySelector('my-modal') } // direct signal at first my-modal node
  );

HTMLImports.whenReady(_ => {
  "use strict";

  class MyEditButton {
    beforeRegister() {
      this.is = 'my-edit-button';
      this.extends = 'button';

      this.properties = {
        myObjectId: {
          type: Number,
          value: -1,
        }
      }
      this.listeners = {
        'tap': 'taphandler'
      }
    }
    taphandler() {
      this.fire(
        'my-edit-button-clicked',
        { 'my-object-id': this.myObjectId },
        { node: document.querySelector('my-modal') } // direct signal at first my-modal node
      );
    }
  }

  Polymer(MyEditButton);

  class MyModal {
    beforeRegister() {
      this.is = 'my-modal';

      this.listeners = {
        'my-edit-button-clicked': '_onButtonClick'
      };
    }

    _onButtonClick(e, details) {
      console.log("Clicked!");
    }
  }

  Polymer(MyModal);
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <my-modal></my-modal>
  <button id="myButton" is="my-edit-button">Click</button>

  <dom-module id="my-modal">
    <template>
      <h1>My Pseudo Modal Dialog</h1>
    </template>
  </dom-module>
</body>

codepen

^{我很困惑，如果对话框是真正的模态，按钮是如何可访问的，但我们假设用户无论如何都可以到达按钮...}

来自Polymer docs：

fire(type, [detail], [options]).触发自定义事件。 options对象可以包含以下属性：



node。用于触发事件的节点（默认为this）。



bubbles。该事件是否应该冒泡。默认为true。



cancelable。是否可以使用preventDefault取消活动。默认为false。

ES6中的聚合物事件侦听器

1 个答案: