How to say when dom-repeat is done by embossing elements

Question

In Polymer, the dom-repeat helper generates a dom-change event whenever it marks the result of an iteration in the DOM. Is there any way to tell me when all iterations are complete?

Answer 1

Perhaps this simple example will help explain the behavior and extend to comments.

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

When dom-change fires, I log the event on the console, so open the dev tools and see. Initially, dom-repeat has three iterations and populates dom with three elements. Please note that only one event will fire, namely when all three elements have been added. If you press the button, two more elements will be added to the repeat. As dom-repeat updated asynchronously, these two elements are processed again at a time and raise only one event.

So, the dom-change event is actually the final event you are looking for. It will only start again if you manipulate the elements attached to it.

Answer 2

To access a dynamically created node (for example, repeating a pattern)

this is. $$ ('# id')

instead of this. $. id

for example, if the template identifier is a "template", you should use

this is. $$ ('# pattern')

 ready: function(){ this.$$('#template').addEventListener("dom-change", function(event){ console.log(event); }); },