I have an array which contains sub-properties, sub-properties are again objects and sub-arrays.
when I get API response from the server I used to display that using dom-repeat and when I get the another API response of the same format with the minor change in its value, I will replace my old array with the new array with dirty checking like
<template is="dom-repeat" items="{{arr}}">
//paper list codes for display
</temlate>
this.arr = [];
this.arr = newArrayFromResponse;
but when I do this only some paper list will update whose values are changed, dom-repeat will not create all nodes, it will just update those nodes whose values have changed.
when I just clear array like this.arr = []; in this case, it will destroy all nodes,
but if I immediately reassign once again it will just update nodes.
how to clear all nodes and execute dom-repeat from scratch? I tried polymers array mutation and render() function and reffered https://github.com/Polymer/polymer/issues/4041 that didn't work!! each time.
I need to render dom-repeat in a similar way like it's rendering for the first time, like a blank screen and immediate rendering
I think Polymer detects that some values have not changed and there is some performance optimisation happening. You could try setting the new values asynchronously.
this.arr = [];
this.async(function() {
this.arr = newArrayFromResponse;
});
Why does this work and your code does not? To know exactly, we would need to look at Polymer code. My guess is that Polymer does not immediately update the DOM after each assignment to this.arr, but somewhere slightly later. When it does update, in your solution this.arr = newArrayFromResponse has happened and the empty Array is never rendered. Polymer probably still has an copy of the old array around and realises that it is the same array with some new items and just adds the new items. My solution introduces a tiny delay. So Polymer does render the empty array and only later render the new one.