聚合物 - 如何将观察者附加到数组？

Question

如何将观察者附加到作为数组的聚合物属性？ 要清楚，我希望在数组中的项更改时进行回调。 为简单起见，假设我的数组是：

[
    { text: 'foo' },
    { text: 'bar' }
]

我想要的东西：

observe : {
    'items.text' : 'itemsChanged'
}

以下作品，但显然是不可持续的：

observe : {
    'items[0].text' : 'itemsChanged',
    'items[1].text' : 'itemsChanged'
}

请注意，在我的情况下，更改来自我控制的另一个聚合物元素。 因此，如果我能够以某种方式触发对可控制{ text: 'foo' }的元素的更改，那么也可以。

Answer 1

要清楚，Polymer会自动观察数组，但是'ArrayObserver'只会告诉你（a）数组本身是否被替换或（b）项目是否被添加，删除或重新排列。 与观察对象一样，Polymer不会自动观察子对象的属性。

这些变化来自我控制的另一种聚合物元素

通常就是这种情况，我们通常会让改变火灾的元素成为沟通的事件。

Answer 2

您可以使用Object.observe（）来完成此任务。 例如：

ready: function() {
    Object.observe(this.items, this.myObserver);
}
myObserver: function (changes){
    changes.forEach(function(change, i){
        console.log('what property changed? ' + change.name);
        console.log('how did it change? ' + change.type);
        console.log('whats the current value? ' + change.object[change.name]);
        console.log(change); // all changes
    });
},

更多这里 。

Answer 3

有点晚了，但因为谷歌上的问题排名相当高，而且以上都没有真正帮助，这是我的解决方案：

Polymer附带observe.js ，这有助于解决您的问题。

基本版本是使用ArrayObserver但这仅在数组被更改时触发，这意味着当添加，删除元素时，我也会在更换条目时猜测。 但是，如果您想观察数组中对象属性的更改（例如在您的情况下），这将无济于事。

这里最好使用CompoundObserver并通过addPath或addObserver(new PathObserver(obj, '...'))添加所有路径addObserver(new PathObserver(obj, '...')) 。 但是你必须迭代整个数组并在循环中添加所有观察到的属性。