Accessing dynamically-added repeated template elements by ID

164 views
Skip to first unread message

bla...@google.com

unread,
Dec 12, 2014, 5:11:42 PM12/12/14
to polym...@googlegroups.com
Heya! Still somewhat new to Polymer so I'm pretty sure I'm doing something wrong with binding, templating, models, etc.  But here's what I'd like to do in a nutshell... given a template within another template, I'd like to be able to access elements that are added after initialization by ID.  In other words, given this:

<template>
  <template repeat="{{a in myList}}">
    <span id="element{{a}}">Span {{a}}</span>
  </template>
</template>

myList: [1]

I see a span tag with ID element1 and can access it just like I expect to with this.$.element1. However, when I dynamically add subsequent elements to myList (e.g. this.myList.push(2)), I can't seem to access them; this.$.element1 is still mapped correctly, but this.$.element2 is nowhere to be found.  

I've put together a fiddle that describes the problem.  Click Add Elements to add elements to the list, the click Test Results and check the console for my thought process.

Is there something additional I need to do to the model to get similar access to this.$.element2?  I can access it through this.shadowRoot.querySelector('#element2'), but I'm wondering why I don't need to do that for element1.  Thanks!

Eric Bidelman

unread,
Dec 12, 2014, 5:21:41 PM12/12/14
to bla...@google.com, polymer-dev
Automatic node finding is not supported with dynamically created content. See https://github.com/Polymer/polymer/issues/642. Instead, you can use qS() directly: 

<div id="container">
 <template repeat="{{a in myList}}">
    <span id="element{{a}}">Span {{a}}</span>
  </template>
</div>

this.$.container.querySelector('#element1')

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/eec0c80b-16cf-48a5-8962-c0f87bde841f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages