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>

Answer 1

您的問題是缺少如何使用這些pm-list和pm-tabmenu元素。
您是在另一個 Polymer 元素中使用它們還是直接在體內使用它們？

我還建議使用數據綁定而不是事件（您可以在pm-tabmenu元素中發布paper-tabs元素的selected屬性並綁定它。

如果你想使用自定義事件並且pm-list和 'pm-tabmenu` 元素是兄弟元素，你必須手動將事件發送給兄弟元素（更多信息請參見此處）。

您還可以考慮使用<core-signals>元素來實現發布訂閱類型的行為（更多信息請參見此處）。

這是一個帶有事件的工作示例，並假設兩個元素都是兄弟元素：

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

---

更新：

您的代碼不起作用的原因是您將pmtabmenuselect事件的 EventListener 添加到pm-list元素，這是錯誤的元素。 只有當您也在pm-list元素中觸發此事件而您沒有觸發此事件pm-list ，這才有效（這不是 Polymer 問題，而是一般事件/javascript 問題）。

您在pm-tabmenu觸發pmtabmenuselect事件，該事件或多或少是pm-list元素的同級元素。 無法在pm-list元素中直接處理此事件，因為它會冒泡。

唯一的解決方案是處理core-header-panel的事件並在pm-list元素內再次觸發它（如Polymer docs 中所述）