How to access any element within iterative templates

Question

Consider the following polymer element.

<polymer-element name="some-element">
  <template>
    <div layout vertical center>
      <template repeat="{{item in array}}">
        <my-first-element on-some-event="{{handleEvent}}"></my-first-element>
        <my-second-element></my-second-element>
      </template>
    </div>
  </template>

  <script>
  Polymer('some-element', {
    handleEvent: function(event, detail, sender) {
      var second_element = sender.templateInstance.model.querySelector('my-second-element');
    }
  });
  </script>
</polymer-element>

I need to access <my-second-element> upon an event that was triggered by <my-first-element> within the same template instance. The querySelector() in the event handler obviously does not work.

score 1 · Answer 1 · answered Feb 18 '15 at 16:17

1

sender is a DOM Element, so you can use for example sender.nextElementSibling to get next node.

answered Feb 18 '15 at 16:17

max_well

341
4
6

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

Here is woking example of your code: Plunk

Selecting is done by:

var second_element = this.shadowRoot.querySelector('#second_element');

More explanation on Automatic node finding here.

edited May 23 '17 at 12:06

Community

1
1

answered Feb 19 '15 at 10:27

Goce Ribeski

1,352
13
30

Thanks for the effort! It *almost* works. The only problem is, that the `querySelector()` always picks the `` instance of the first template iteration regardless of which button I've clicked in your example. – koloman Feb 19 '15 at 20:00
Well, that is called selecting by dynamic ID. Plunk is edited and now will do that job too. – Goce Ribeski Feb 20 '15 at 00:40

How to access any element within iterative templates

2 Answers2