Bind event to element in a template repeat

Question

Is it possible to get the elements that will be/were rendered from a <template repeat>?

I have a component called poly-list, implemented below:

<poly-list dataList="{{ data.in }}" id="inList"
                           style="overflow: hidden; min-width: 324px; display: inline-block;">
                    <template>
                        <div> <!-- on-click event here -->
                            <paper-input-no-error value="{{ [0] }}"
                                                  class="in-paper-input"
                                                  on-change="{{ inChanged }}" id="0"></paper-input-no-error>

                            <paper-input-no-error value="{{ [1] }}"
                                                  class="in-paper-input"
                                                  placeholder="Value" id="1"></paper-input-no-error>
                        </div>
                    </template>
                </poly-list>

I then activate the template in the domReady callback:

this.template.model = this.data;
this.template.setAttribute('repeat', '');

I need a way to get each individual element that the template will put into the DOM. I need to do this in order to add an event listener to each component that is rendered. I also want this to be encapsulated in my poly-list components so components implementing poly-list will not need to setup the event itself.

I need to add the event to the top level element in the template repeat. In this case it is the div. I commented where I mean in the code above. Event bubbling could work but would not be reusable due to the fact that I do not know how for in the element will be that triggered the event thus making it impossible to say the top level element is always 1 parent element above as in the example above.

Is there an event that will return each element as it is rendered or something similar?

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

"Is it possible to get the elements that will be/were rendered from a template repeat?"

Yes, but only after Template Repeat has finished. Then you can select the elements by automatic node finding: this.$

There is an example here: How can I know that Template Repeat has finished?

edited May 23 '17 at 10:26

Community

1
1

answered Feb 09 '15 at 19:21

Goce Ribeski

1,352
13
30

score 0 · Answer 2 · answered Aug 27 '14 at 05:20

0

Can't you just use Polymer's declarative event binding?

<poly-list ...>
  <template>
    <div on-click="{{ clickHandler }}">
      <paper-input-no-error ...></paper-input-no-error>

      <paper-input-no-error ...></paper-input-no-error>
    </div>
  </template>
</poly-list>

(with a method on your outer element's prototype called clickHandler)

With regards to bubbling, there probably is some way which you could get it to work.

answered Aug 27 '14 at 05:20

CletusW

3,890
1
27
42

I do not want the user to have to define the on-click event when defining the poly-list. I want it to be handled internally in poly-list. – kennyjwilli Aug 27 '14 at 16:11

Bind event to element in a template repeat

2 Answers2