Polymer ready() and event listeners
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 recommend 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.com/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)
Greg
Updated on June 06, 2022Comments
-
Greg over 1 year
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 :)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>
-
Greg about 9 yearsI have added the way I was intending on using these elements. The idea was to have certain independent components on the page, and with broadcasting custom events each of these could react accordingly. I am a bit confused why this did not work as I would think the code itself had no issues, is this scope or shadowDOM related? And as for independent components broadcasting into the wild, it seems <core-signals> might actually be the way forward.
-
Ümit about 9 yearsI edited the post to further describe why your code doesn't work.