Polymer ready () and event listeners

Question

I encounter strange behavior following the examples on the polymer website for creating custom events and delegation ( https://www.polymer-project.org/articles/communication.html ). I have tabs with polymer tabs that trigger my custom event when the tab changes, and now I'm trying to have my other user element listen for the event and respond, but I don't see something explicitly, since the event does not go up from inside of ready (). However, if I tie it to the window, I see that it works without any problems, so it would be possible to evaluate the second pair of eyes :)

This is a custom item that fires an event when tabs change:

<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 user 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 called, but there is no section, since I do not think that 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> 

Edit: Additional information is provided upon request.

Edit2: Added using item code.

Answer 1

You ask how you use those pm-list and pm-tabmenu .
Do you use them inside another polymer element or directly in the body?

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

If you want to use custom events, and the pm-list and'pm-tabmenu` elements are siblings, you must manually send the events to your siblings (see here for more information).

You can also consider the <core-signals> element to implement pubsub behavior (see here for more information).

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

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

---

UPDATE:

The reason your code doesn't work is because you are adding an EventListener for your pmtabmenuselect event to the pm-list element, which is the wrong element. This will only work if you also trigger this event inside your pm-list element that you don't have (this is not a Polymer problem, but rather a common thing / javascript).

You pmtabmenuselect event inside your pm-tabmenu , which is more or less related to your pm-list element. It is not possible to directly handle this event inside your pm-list element because it is bubbling up.

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