Bind event to element in a template repeat

[kenny...@gmail.com]

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="{{ testClick }}">

                            <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.

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

[Rob Dodson]

Can you leverage the declarative event bindings in your repeating template like so: http://jsbin.com/hejiwu/2/edit

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/74312825-9322-4cec-ab52-8fe34b0ddbbf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[kenny...@gmail.com]

Unfortunately not. This is because of the way the poly-list should work. I don't want to have the end user need to setup an on-click handler. The user defines their content to be repeated where poly-list is implemented, not defined. As shown in my example in the initial post. A simplified version is shown below:

<poly-list data="{{ data.in }}">
 <template>
  <div> <!-- on-click on this element without user defining it -->
   <span>Repeated content</span>
  </div>
 </template>

[kenny...@gmail.com]

EDIT TO ORIGINAL POST: I did not mean to include the on-click event on the div in my code. This was for an example of where the on-click event should be.

[Steve Orvell]

It's best not to directly touch elements rendered via a template repeat. To do so you'd need to setup a MutationObserver and possibly deal with the elements being removed.

For this use case you can leverage event bubbling to delegate the event up the tree to a declarative event handler in the dom above the individual template items. You can then use event.target or possibly event.path to get the target of interest.

On Mon, Aug 25, 2014 at 6:45 PM, <kenny...@gmail.com> wrote:

EDIT TO ORIGINAL POST: I did not mean to include the on-click event on the div in my code. This was for an example of where the on-click event should be.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/231d8198-1f2f-47ec-a934-57346fb19c54%40googlegroups.com.

[Rob Dodson]

Here's an example which adds a listener to the element itself and then alerts the event target's textContent: http://jsbin.com/getem/4/edit

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZhb%3DUQe0ArGbgUJ%3DUvmAoavj6aM6diMvK3CNzJMA%3DNE1w%40mail.gmail.com.

[kenny...@gmail.com]

Awesome. Just as you posted that I came to a similar conclusion and am able to reproduce exactly the same thing as you did. The only thing is that I need to have access to the top level element within poly-list. The reason for this is because I need to change some css on it when it is clicked. For example:

<poly-list data="{{ data.in }}">
 <template>
  <div> <!-- on-click on this element without user defining it -->
   <span>Repeated content</span>
  </div>
 </template>

</poly-list>

By top level in poly-list I mean that div element.