在遵循 Polymer 网站上关于自定义事件创建和委托(delegate)的示例 (https://www.polymer-project.org/articles/communication.html) 时，我遇到了奇怪的行为。当标签更改时，我有 polymer 选项卡在启动自定义事件，现在我正在尝试另一个自定义元素来聆听事件并进行 react ，但是我很明显地缺少了一些东西，因为事件没有从内部拾取ready() 函数。但是，如果我将它绑定(bind)到窗口，我可以看到它毫无问题地触发，所以第二双眼睛会很感激:)

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

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

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

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

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

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

最佳答案

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

我还建议使用数据绑定(bind)而不是事件(您可以在 selected 元素中发布 paper-tabs 元素的 pm-tabmenu 属性并对其进行绑定(bind)。

如果您想使用自定义事件和 pm-list和 ‘pm-tabmenu’ 元素是 sibling ，您必须手动将事件发送给 sibling (有关更多信息，请参阅 here)。

您还可以考虑 <core-signals>元素来实现 pubsub 类型的行为(有关更多信息，请参阅 here)。

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

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

更新:

您的代码不起作用的原因是因为您为 pmtabmenuselect 添加了 EventListener|事件到您的pm-list元素，这是错误的元素。仅当您也在 pm-list 中触发此事件时，这才会起作用。你没有的元素(这不是 Polymer 问题，而是一般事件/javascript 问题)。

你开火了 pmtabmenuselect你里面的事件pm-tabmenu这或多或少是你的pm-list的 sibling 元素。没有办法在你的 pm-list 中直接处理这个事件元素，因为它会冒泡。

唯一的解决方案是在您的 core-header-panel 中处理事件并在 pm-list 中再次发射它元素(如 Polymer docs 中所述)

关于javascript - Polymer ready() 和事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26997293/