ES6中的Polymer事件侦听器

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

有人知道为什么吗？ 是否存在“事件范围”或仅在一个方向上触发事件？

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>

码笔

否则，如果按钮是同级按钮，则事件将冒泡到文档中，从而跳过模式。 在这种情况下，当您从按钮调用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>

码笔

来自Polymer docs ：

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

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

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

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

ES6中的Polymer事件侦听器

问题描述

1 个解决方案

解决方案1
1 2016-06-28 10:10:43

ES6中的Polymer事件侦听器

问题描述

1 个解决方案

解决方案1 1 2016-06-28 10:10:43

解决方案1
1 2016-06-28 10:10:43