I need to access via JS all the elements stated by a template after it has
been resolved. For instance, let's suppose we have this simple iterative
template expanding a collection of items.
<ul id="menu">
<template repeat="{{ item in items }}">
<li>{{item}}</li>
</template>
</ul>
When the template has been resolved, a fresh set of DOM nodes would appear:
<ul id="menu">
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
Then, I need to access each of these nodes in order to add some cool JQuery
effects. To do that, I have used a naive approach including the following
code at the end of the ready lifecycle method:
var children = this.$.menu.children;
console.log ('children: ', children); // (1)
for(var i = 0; i < children.length; i++) {
var child = children[i];
(function (element) {
... // Adding JQuery effects
}.bind(this))(child);
}
As it hints the console.log in (1) this code does not operate over the set
of resolved nodes but on the unresolved template. That is, children
variable holds a single "template" node (children.impl === template). So,
my question is how can I get the elements once the template has been
resolved? Is it a problem of my code or an issue about its location within
the lifecycle? In any case, how can I fix it?
Thanks in advance,
Javier.
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/1bcf617b-447a-4d37-8f6e-ff9896864b37%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
