I have a custom element that utilizes iron-list
to display an array of objects. Each item is generated via a template as follows:
<iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">
<template>
<div>
<paper-material id="itemShadow" animated elevation="1">
<div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">
<!-- I use a paper-menu-button to display a list of available actions here -->
<!-- list item object content here such as: [[projLI.desc]] etc. -->
</div>
</paper-material>
</div>
</template>
</iron-list>
What is the best polymer-friendly approach to detect both a tap event on the iron-list item itself (ideally knowing which item was actually tapped via projLI._id
), yet also be able to handle the internal paper-menu-button
tap events in a different way?
I've eye-balled polymer 1.0's new event listeners (https://www.polymer-project.org/1.0/docs/devguide/events.html), as a possible approach, attempting to listen for different element tap events (as shown in example 1 on that page), but I'm not sure if that will work here. I've also considered possibly using iron-selector
somehow around iron-list? Is that doable? I'm not sure that will work either, given that iron-selector would only have one child (i.e. the iron-list element and not it's templated children).
I feel like I'm missing a really easy way to accomplish this. Can someone please show me the light?
Follow the model outlined on lines 154 and 184 of this demo. https://github.com/PolymerElements/iron-list/blob/master/demo/collapse.html
my-element.htmlThe key is to place the event and listener method (
toggleMe()
in this case) inside the<template>
of theiron-list
. This allows theiron-list
to register the array index.I just solved my issue of here https://groups.google.com/forum/#!topic/polymer-dev/r9IsUKVnLVM. Reading this documentation https://www.polymer-project.org/1.0/docs/devguide/events.html.
I hope it helps you!
Wrap your
iron-list
with aniron-selector
- this allows you get to get the row selected / tapped.(NB: you might need to remove your custom indexAs="_id" attribute to get the right row index)
Polymer method for row item selected:
I do this by encoding an array index in a list element id, then pulling the id out of a list item event target. Here is an example Polymer element that does this.
I was having a similar issue and solved my problem using
<array-selector>
as follows:and
myarray
is an array of objects:and the function
toggleSelection
is defined as follows:The field name ref after
e.model.__
is the value of theas
attribute ofiron-list
.WARNING: The variable
e.model
is not officially documented on the Polymer 1.0iron-list
doc (https://elements.polymer-project.org/elements/iron-list), however I discovered it during my debugging session. I am assuming thate.model
is a public property (the coding style of Polymer uses underscore prefix for private property such as:_scroll_Position
) and it is not a candidate for deprecation.