Polymer execute complete dom-repeat after immediately dirty checking and assigning

Question

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

what is expected outcome? why don't you use polymers array mutations? when you use this.set('arr', null) and then this.set('arr', newArrayFromResponse) it should work. at least in my project i am doing it and everything is fine (nodes are completely deleted from html). I didn't get the point propably. — Kuba Šimonovský
suppose if you have 10 lists which are generated using dom-repeat, then assume next time only 3 list values are changed,then in this case it will only update 3 list by keeping all the other 7 list. what I want is when I dirty check it should clear all the nodes like empty screen for a fraction of seconds and regenerate all 10 nodes once again as a fresh copy — ksh

Maria Maria · Accepted Answer · 2017-04-06T14:19:31

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.

Polymer execute complete dom-repeat after immediately dirty checking and assigning

1 Answers