Polymer 1.5使用不可变数据结构时如何通知dom repeat
问题:我们正在使用redux管理应用程序中的状态。这会导致渲染中出现问题。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>
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);
}