In Polymer, the dom-repeat template helper emits a dom-change event whenever it stamps the result of an iteration into the DOM. Is there a way for me to tell when ALL of the iterations are plete?
In Polymer, the dom-repeat template helper emits a dom-change event whenever it stamps the result of an iteration into the DOM. Is there a way for me to tell when ALL of the iterations are plete?
- Is it possible to determine this by looking at data in the dom change event - knowing what data item should be last and then checking for that? Perhaps not the ideal solution, however. – mmm111mmm Commented Sep 6, 2015 at 19:14
- 1 github./Polymer/polymer/blob/master/src/lib/template/… @348 it fires an event at the conclusion of its render() – Robert Rowntree Commented Sep 6, 2015 at 20:07
-
1
as Robert says above the
dom-changeevent is fired when the render of thedom-repeattemplate is plete. You should then be able to add to your template the following line of code which will execute a function when this event is fired:<template is="dom-repeat" on-dom-change="_functionToCall">– Ben Thomas Commented Sep 7, 2015 at 8:44 -
How Can I distinguish the final
dom-changeevent from the other ones though? – Luke Commented Sep 7, 2015 at 11:07
2 Answers
Reset to default 12Maybe this simple example can help explain the behaviour and extend on the ments.
<dom-module id="change-tester">
<template>
<h1>Change Tester</h1>
<ul>
<template id="template" is="dom-repeat" items="{{content}}">
<li>{{item}}</li>
</template>
</ul>
<button on-click="more">Add more</button>
</template>
</dom-module>
<script>
Polymer({
is: 'change-tester',
properties: {
content: {
type: Array,
value: function(){ return ["one", "two", "three"]}
}
},
ready: function(){
this.$.template.addEventListener("dom-change", function(event){
console.log(event);
});
},
more: function(){
this.push("content", "four");
this.push("content", "five");
}
});
</script>
Whenever dom-change is fired, I log the event to the console, so open the dev tools and have a look. Initially, the dom-repeat has three iterations and will populate the dom with three elements. Note that only one event will fire, namely when all three elements have been added. If you click the button, two more items are added to the content in the repeat. As the dom-repeat updates asynchronously, these two items are again handled in one go and will only trigger one event.
So the dom-change event is actually that final event you are looking for. It will only fire again, if you manipulate the items that are bound to it.
To access a dynamically created node in Polymer 1.x (like template repeat) use:
this.$$('#id')
For Polymer 2.x use:
this.shadowRoot.getElementById('id');
instead of this.$.id
for example if the template id is template you should use
this.$$('#template')
ready: function(){
this.$$('#template').addEventListener("dom-change", function(event){
console.log(event);
});
},