javascript Polymer ready() 和事件监听器

Polymer ready() and event listeners

提问by Greg

I am running into weird behaviour when following examples from polymer website on custom event creation and delegation (https://www.polymer-project.org/articles/communication.html). I have polymer tabs firing my custom event when the tab changes, and now I am trying for my another custom element to listen for an event and react, but there is something I am missing obviously, as the event is not being picked up from within ready() function. However, if I bind it to window, I can see it fires without any problems, so a second pair of eyes would be appreciated :)

在遵循聚合物网站上有关自定义事件创建和委派的示例 ( https://www.polymer-project.org/articles/communication.html)时，我遇到了奇怪的行为。当标签更改时，我有聚合物选项卡射击我的自定义事件，现在我正在尝试我的另一个自定义元素来收听事件并反应，但是我缺少一些我缺少的事情，因为事件没有从内部被拿起准备（）函数。但是，如果我将它绑定到窗口，我可以看到它毫无问题地燃烧，所以第二双眼睛将不胜感激:)

This is the custom element firing an event when tab is changed:

这是在更改选项卡时触发事件的自定义元素：

<polymer-element name="pm-tabmenu">
    <template>
        <style>
            :host {
                display:block;
            }
        </style>
        <paper-tabs selected="1" id="tabmenu">
            <paper-tab id="pm-tabmenu-all" state="all">All</paper-tab>
            <paper-tab id="pm-tabmenu-wip" state="wip">In Progress</paper-tab>
            <paper-tab id="pm-tabmenu-finished" state="finished">Finished</paper-tab>
        </paper-tabs>
    </template>
    <script>

        Polymer({
            ready: function () {
                var tabs = this.$.tabmenu;
                tabs.addEventListener('core-select', function (event) {
                    if (event.detail.isSelected) {
                        this.fire("pmtabmenuselect", {
                            state: event.detail.item.getAttribute('state')
                        });
                        alert(event.detail.item.getAttribute('state'));                         
                    }
                });
            }
        });
    </script>
</polymer-element>

This is how I want to capture an event in another custom element:

这就是我想在另一个自定义元素中捕获事件的方式：

<polymer-element name="pm-list">
    <template>
        <style>
            :host {
                display:block;
            }
        </style>
        <h1> Current filter: {{filter}}</h1>
    </template>
    <script>
        window.addEventListener('pmtabmenuselect', function (e) {
            alert("This does fire");
        });
        Polymer({
            filter: "Not yet defined",
            ready: function () {
                this.addEventListener('pmtabmenuselect', function (e) {
                    alert("This does not fire");
                });
            }
        });
     </script>
</polymer-element>

In the index file both elements are included and then invoked, but there is no section as I would not think it is needed at the moment.

在索引文件中，两个元素都被包含然后被调用，但没有任何部分，因为我认为目前不需要它。

<core-header-panel flex main>
            <core-toolbar class="medium-tall">
                <paper-icon-button icon="menu" core-drawer-toggle></paper-icon-button>
                <div flex>Tests</div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="more-vert"></paper-icon-button>

                <div class="bottom fit" horizontal layout>
                    <pm-tabmenu flex style="max-width: 600px;"></pm-tabmenu>
                </div>
            </core-toolbar>
            <pm-list></pm-list>
        </core-header-panel>

Edit:Provided more details as requested.

编辑：根据要求提供了更多详细信息。

Edit2:Added use of elements code.

Edit2：添加了元素代码的使用。

回答by ümit

You question is missing how you use those pm-listand pm-tabmenuelements.
Do you use them inside another Polymer element or directly in the body ?

您的问题是缺少如何使用这些pm-list和pm-tabmenu元素。
您是在另一个 Polymer 元素中使用它们还是直接在体内使用它们？

I would also recommend to use data-binding rather than events (you can publish the selectedproperty of the paper-tabselement in your pm-tabmenuelement and bind against it.

我还建议使用数据绑定而不是事件（您可以selected在paper-tabs元素中发布元素的属性pm-tabmenu并绑定它。

If you want to use custom events and the pm-listand ′pm-tabmenu` elements are siblings you have to manually send the events to the siblings (see herefore more infos).

如果你想使用自定义事件并且pm-list'pm-tabmenu` 元素是兄弟元素，你必须手动将事件发送给兄弟元素（更多信息请参见此处）。

You can also conside the <core-signals>element to implement a pubsub kind of behavior (see herefore more infos).

您还可以考虑使用该<core-signals>元素来实现 pubsub 类型的行为（有关更多信息，请参见此处）。

This is a working example with events and assuming that both elements are siblings:

这是一个带有事件的工作示例，并假设两个元素都是兄弟元素：

http://jsbin.com/wexov/11/edit

http://jsbin.com/wexov/11/edit

---

---

UPDATE:

更新：

The reason why your code doesn't work is because you add the EventListener for your pmtabmenuselectevent to your pm-listelement, which is the wrong element. This will only work if you would also fire this event inside your pm-listelement which you don't (this is not a Polymer issue but rather a general event/javascript thing).

您的代码不起作用的原因是您将事件的 EventListener 添加pmtabmenuselect到pm-list元素中，这是错误的元素。只有当您还在pm-list元素中触发此事件而您没有触发此事件时，这才有效（这不是 Polymer 问题，而是一般事件/javascript 问题）。

You fire the pmtabmenuselectevent inside your pm-tabmenuwhich is more or less a sibling to your pm-listelement. There is no way to directly handle this event inside your pm-listelement because it bubbles up.

您pmtabmenuselect在您的内部触发事件pm-tabmenu，该事件或多或少是您pm-list元素的兄弟。无法直接在pm-list元素内部处理此事件，因为它会冒泡。

The only solution is to handle the event in your core-header-paneland fire it again inside the pm-listelement (as described in the Polymer docs)

唯一的解决方案是处理您的事件core-header-panel并在pm-list元素内再次触发它（如Polymer 文档中所述）