Polymer 1.0 itemForElement in nested dom-repeat

Question

For example, I have a dom-repeat like this:

<template is="dom-repeat" id="rows" items="[[rows]]" as="row">
  <tr class="result-tb-row" closed$=[[row.closed]]>
    <td class="result-tb-data">
      <ul class="violation-list">
        <template id="rowItem" is="dom-repeat" items="[[row.items]]">
          <li on-click="click">[[item]]</li>
        </template>
      <ul>
    </td>
  </tr>
</template>

If I want to know which row I am clicking on, I can write a something like this:

this.$.rows.itemForElement(event.target);

However, what if I want to get the exact item corresponding to li I clicked on. How do I do so? I obviously cannot do this.$.rowItem.itemForElement(event.target) because rowItem isn't unique.

Update

event.model.item seems to solve this particular problem. But if you have double nested dom-repeat or more and you want to get the middle layers, you're out of luck. Probably have to implement an iterator yourselves. double nested dom-repeat happens a lot in table. Table is already a nested dom-repeat; if you want a dom-repeat inside a table cell (and you will run into it), double nested dom-repeat happens.

It isn't hard to implement an iterator, just hope that the Polymer team supports more methods for nested dom-repeat because this is an awesome feature.

Use the returned sender parameter from the click fn to access the li — Ricky

David Rissato Cruz David Rissato Cruz · Accepted Answer · 2015-10-02T03:09:48

event.target holds a <li> reference.

When you do this.$.rowItem.itemForElement(event.target), the dom-repeat named rowItem is unique, and it will look what item belongs to that <li>.

But if you just want item data, you can use event.model.item, which holds a reference to the item data that belongs to the line you clicked.

Polymer 1.0 itemForElement in nested dom-repeat

3 Answers