Polymer 1.0 cannot find events for paper menus or paper

Question

Upgrading to Polymer 1.0, How do I listen / capture to change the "focusItem" behavior of the iron menu? I do not see an event listener or property changes to change the position, i.e. Changes in the selection of paper elements in the paper menu. I do not see such events here: https://elements.polymer-project.org/elements/iron-menu-behavior?active=Polymer.IronMenuBehavior

Answer 1

I have not yet been able to find the documentation on this subject (maybe someone else might be more lucky), but the events you are looking for are iron-select and iron-deselect . Both of these events use a handler format: eventHandler(e, details) , in which:

• e is CustomEvent .
• details - an object with the item property indicating the item that was selected or canceled.

I created a demo on Plunker that you can play with. It has an example menu and will record both e and details from the iron-select and iron-deselect in the console.

However, if you can avoid using the event and use bindings instead, I would recommend this route first. If this is in the user element, you can, for example, do:

 <dom-module id="my-custom-element"> <template> <div> <span>[[selectedMessage]]</span> <span>[[oldSelectedMessage]]</span> </div> <paper-menu selected="{{selectedIndex}}"> <paper-item>This is item #0</paper-item> <paper-item>This is item #1</paper-item> <paper-item>This is item #3</paper-item> </paper-menu> </template> </dom-module> <script> Polymer({ is: 'my-custom-element', properties: { selectedIndex: { type: Number, value: 0, observer: '_selectedIndexChanged' } }, _selectedIndexChanged: function(newIndex, oldIndex) { if (typeof newIndex === 'number') { this.selectedMessage = 'You selected item #' + newIndex + '.'; } if (typeof oldIndex === 'number') { this.oldSelectedMessage = 'Before, you had item #' + oldIndex + ' selected.'; } } }); </script> 

Answer 2

I find that people often like to overload things when they come across Polymer. Here's a simple approach:

Js

 var menu = document.querySelector("#myMenu"); menu.addEventListener("iron-select", function(){ console.log(menu.selected); // index console.log(menu.selectedItem.getAttribute("value")); // value }); 

HTML

 <paper-menu id="myMenu"> <paper-item value="one">Foo</paper-item> <paper-item value="two">Bar</paper-item> </paper-menu> 

Answer 3

There is on-iron-select .

So you can do

  <paper-menu id="categoryMenu" on-iron-select="selectCategory"> <template is="dom-repeat" items="{{categories}}"> <paper-item data-type="{{item.code}}">{{item.name}}</paper-item> </template> <paper-item>More</paper-item> </paper-menu> 

Script

 app.selectCategory = function (e, item) { if (!app.categories) { return; } app.category = app.categories[app.$.categoryMenu.indexOf(item.item)]; console.log('Select category ', app.category) }; 

But this is not said, here is a line when the event is fired.