Polymer 1.5使用不可变数据结构时如何通知dom repeat

Polymer 1.5使用不可变数据结构时如何通知dom repeat,polymer,polymer-1.0,Polymer,Polymer 1.0,问题:我们正在使用redux管理应用程序中的状态。这会导致渲染中出现问题。dom中继器未正确处理数组中的更改(如删除)。发生的情况是,数据和盖章的模板混淆了 我想找到一种方法来通知dom repeat元素数组的更改 <template is="dom-repeat" items="[[data.items]]"> <repeater-item config="[[item]]" on-change="_onChange"></repeater-item>

问题:我们正在使用redux管理应用程序中的状态。这会导致渲染中出现问题。
dom中继器未正确处理数组中的更改(如删除)。发生的情况是,数据和盖章的模板混淆了

我想找到一种方法来通知
dom repeat
元素数组的更改

<template is="dom-repeat" items="[[data.items]]">
    <repeater-item config="[[item]]" on-change="_onChange"></repeater-item>
</template>
2) 在第二次尝试中,我尝试通知拼接:

var splices = Polymer.ArraySplice.calculateSplices(newState.items, this.data.items);
this.data = newState;
this.notifySplices('data.items', splices);
结果是一样的

3) 由于某种原因,下面的方法几乎奏效了

var splices = Polymer.ArraySplice.calculateSplices(newState.items, this.data.items);
this.data.items = newState.items;
this.notifySplices('data.items', splices);
这将导致正确的模板删除,但在这里我收到一个错误:

VM47184 polymer-mini.html:2046 Uncaught TypeError: Cannot read property 'length' of undefined

如果使用不可变状态,通知“dom repeat”的正确方法是什么?

我已经能够防止选项3的错误;为新数组添加
Polymer.Collection.get
,似乎可以防止在方法完成和dom repeat呈现更改后发生的错误

_remove(id) {
  var newState = {
    items: this.data.items.filter(item => item.id !== id)
  };

  // Polymer.Collection.get somehow prevents an exception _after_ notifySplices is called
  Polymer.Collection.get(newState.items);

  // Retro-actively calculate splices in Polymer fashion
  var prev = (this.data.items || []);
  var splices = Polymer.ArraySplice.calculateSplices(newState.items, prev);

  // Change the data _without_ Polymer being aware of it (because it isn't a direct property of the element)
  this.data.items = newState.items;

  // Notify Polymer about the array changes so dom-repeat can re-use the correct templates
  this.notifySplices('data.items', splices);
}
在行动中看到它:

我不知道为什么这会阻止这个异常,这更像是一个意外发现

但这似乎仍然是次优的解决方案,因为必须将受影响的数组隐藏在包装器对象中

_remove(id) {
  var newState = {
    items: this.data.items.filter(item => item.id !== id)
  };

  // Polymer.Collection.get somehow prevents an exception _after_ notifySplices is called
  Polymer.Collection.get(newState.items);

  // Retro-actively calculate splices in Polymer fashion
  var prev = (this.data.items || []);
  var splices = Polymer.ArraySplice.calculateSplices(newState.items, prev);

  // Change the data _without_ Polymer being aware of it (because it isn't a direct property of the element)
  this.data.items = newState.items;

  // Notify Polymer about the array changes so dom-repeat can re-use the correct templates
  this.notifySplices('data.items', splices);
}