Dynamic update of dom-repeat templates by changing the underlying array

Question

Is there a Polymer dom api method or other ways to automatically update the repeated template with additional elements, should the underlying array gets updated?

I have a dynamic array that gets updated through ajax calls repeatedly. This array keeps changing its length (elements get incrementally appended or removed based on the ajax response). The array is reflected in the document through <template is="dom-repeat">. Is there a way to automatically update the dom when the underlying array gets updated?

At present, the only ways I can see are

1. Identifying the incremental updates and manually append or delete the nodes.
2. Delete the entire repeat template container and restamp a new template. I do not know of anyway to stamp a new template dynamically either. Is this possible? One way I can think of achieving this is having another custom element that does repeat template stamping and whenever there is an array update, delete the current element, append a new element by passing the updated array to the element.

By using 2, I will not be able to use the transition effects of the list automatically updating in the view. I want to be able to use these effects.

Answer 1

If you update the array with this.push('myarray', {item}); then that will trigger Polymer's binding observers. More info is in the documentation at https://www.polymer-project.org/1.0/docs/devguide/properties#array-mutation