javascript - Polymer ready() and event listeners - Stack Overflow

admin管理员组

文章数量:1415491

I am running into weird behaviour when following examples from polymer website on custom event creation and delegation (.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 :)

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>

I am running into weird behaviour when following examples from polymer website on custom event creation and delegation (https://www.polymer-project/articles/munication.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 :)

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>

• javascript
• polymer
• dom-events

Share Improve this question Follow edited Oct 23, 2020 at 12:27 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 18, 2014 at 14:57 GregGreg 2,50355 gold badges2222 silver badges2323 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You question is missing how you use those pm-list and pm-tabmenu elements.
Do you use them inside another Polymer element or directly in the body ?

I would also remend to use data-binding rather than events (you can publish the selected property of the paper-tabs element in your pm-tabmenu element and bind against it.

If you want to use custom events and the pm-list and ´pm-tabmenu` elements are siblings you have to manually send the events to the siblings (see here fore more infos).

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

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

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

---

UPDATE:

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

You fire the pmtabmenuselect event inside your pm-tabmenu which is more or less a sibling to your pm-list element. There is no way to directly handle this event inside your pm-list element because it bubbles up.

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

本文标签： javascriptPolymer ready() and event listenersStack Overflow