Accessing elements inside dom-repeat in app
I would like to be able to access the elements inside dom-repeat
. Here el
returns an empty array:
<dom-module id="child-element">
<template>
<div id="ida">
<ul>
<template is="dom-repeat" items="{{user}}" id="items">
<li class = "classa">{{item.name}}</li>
</template>
</ul>
</div>
</template>
<script>
ChildElement = Polymer({
is: 'child-element',
factoryImpl(users) {
this.user = users;
},
properties: {
user: {
type: Array
}
},
attached: function() {
var el = Polymer.dom(this.root).querySelectorAll("#ida .classa");
console.log("el",el);
}
});
</script>
</dom-module>
How can I access dynamically created elements internally dom-repeat
from somewhere else in Polymer?
Here is a link to the full version.
source to share
When the name is appended, the children cannot yet be initialized. Wrap your code in an asynchronous function.
attached:function(){
this.async(function() {
// access sibling or parent elements here
var el = Polymer.dom(this.root).querySelector("#ida .classa");
console.log("el",el);
});
}
This is described in the developer guide
source to share
So, while the question didn't ask for access to elements by theirs id
, this is still an acceptable way of accessing those elements, although not in the way @Maksym Galich answered.
Instead of accessing through an object, the this.$
correct way to access a dynamically created element is through a method this.$$(selector)
.
From Node Documentation Local DOM Search :
Polymer automatically creates a map of statically instantiated instances in its local DOM to provide easy access to frequently used nodes without having to manually query them. Any node specified in the template of the elements with ID are stored in this. $ Hash by id.
Note. Nodes created dynamically using data binding (including in dom-repeat and dom-if templates) are not appended to this. $ hash . The hash only includes statically generated local DOM nodes (that is, nodes defined in the outermost element template).
...
Use the $$ method to search for dynamically created nodes in local DOM elements:
this is. $$ (selector)
$$ returns the first node in the local DOM that matches the selector.
( The emphasis in the above text was mine)
My personal note:
NOTE: Please note: this. $$ is not an object, but a method. Therefore, id
it is not possible to simply print all the elements with using this.$$
, but finding a specific dynamically created element is actually what I need for it - and most likely you need it too :)
source to share
You cannot get a list of elements in the dom-repeat, but you can use an id for each element in the dom-repeat. Like this
<template is="dom-repeat" items="{{dataView}}">
<neon-animatable id="{{item.id}}">
<inner-content data="{{item.content}}"></inner-content>
</neon-animatable>
</template>
And get the element via next select
var el = this.$['something_id'];
source to share