1

我有一个包含子属性的数组，子属性又是对象和子数组。

当我从服务器获得 API 响应时，我曾经使用 dom-repeat 显示该响应，并且当我获得另一个相同格式的 API 响应且其值发生微小变化时，我将用脏检查的新数组替换旧数组像

<template is="dom-repeat" items="{{arr}}">
 //paper list codes for display
</temlate>

  this.arr = [];
  this.arr = newArrayFromResponse;

但是当我这样做时，只有一些纸质列表会更新其值已更改，dom-repeat 不会创建所有节点，它只会更新那些值已更改的节点。

当我像这样清除数组时.arr = []; 在这种情况下，它将销毁所有节点，

但如果我立即再次重新分配它只会更新节点。

如何清除所有节点并从头开始执行 dom-repeat？我尝试了聚合物阵列突变和 render() 函数并引用了https://github.com/Polymer/polymer/issues/4041 不起作用！每一次。

我需要以类似于第一次渲染的方式渲染 dom-repeat，例如空白屏幕和立即渲染

4

1 回答 1

2

我认为 Polymer 检测到某些值没有改变，并且发生了一些性能优化。您可以尝试异步设置新值。

this.arr = [];

this.async(function() {
    this.arr = newArrayFromResponse;
});

为什么这有效而您的代码无效？要准确了解，我们需要查看 Polymer 代码。我的猜测是，Polymer 不会在每次分配到 后立即更新 DOM this.arr，而是稍晚一些。当它更新时，您的解决方案this.arr = newArrayFromResponse已经发生并且空数组永远不会呈现。Polymer 可能仍然有一个旧数组的副本，并意识到它是带有一些新项目的同一个数组，并且只是添加了新项目。我的解决方案引入了一个微小的延迟。所以 Polymer 确实渲染了空数组，然后才渲染新数组。

于 2017-04-06T14:19:31.253 回答