Polymer ready()和事件侦听器

Question

当我从聚合物网站上关于自定义事件创建和委派(https://www.polymer-project.org/articles/communication.html)的示例时,我遇到了奇怪的行为.当标签发生变化时,我有聚合物标签触发我的自定义事件,现在我正在尝试我的另一个自定义元素来监听事件并做出反应,但是有一些我很明显缺少的事情,因为事件没有从内部被拾取ready()函数.但是,如果我将它绑定到窗口,我可以看到它没有任何问题,所以第二双眼睛将被赞赏:)

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

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

编辑:根据要求提供更多详细信息.

Edit2:添加了元素代码的使用.

Answer 1

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

\n\n

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

\n\n

如果您想使用自定义事件，并且pm-list\xc2\xb4pm-tabmenu` 元素是同级元素，您必须手动将事件发送到同级元素（请参阅此处，了解更多信息）。

\n\n

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

\n\n

这是一个包含事件的工作示例，并假设两个元素是同级元素：

\n\n

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

\n\n\n\n

更新：

\n\n

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

\n\n

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

\n\n

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

\n