CODEWITHSUNDEEP
javascriptpolymer
koloman
koloman

Reputation: 731

How to access any element within iterative templates

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.

Upvotes: 0

Views: 54

Answers (2)

Goce Ribeski
Goce Ribeski

Reputation: 1372

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.

Upvotes: 1

max_well
max_well

Reputation: 341

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

Upvotes: 1

Related Questions