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

Question

如何将观察器附加到作为数组的聚合属性？明确一点，我想在数组中的项目更改时回调。为简单起见，假设我的数组是：

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

我需要类似这样的东西：

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

以下内容虽然可行，但是显然不够可持续：

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

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

- user578895

Answer 1

为了明确，Polymer会自动观察数组，但是'ArrayObserver'只会告诉你(a)数组本身是否被替换或(b)项目是否被添加、删除或重新排列。就像观察到的对象一样，Polymer不会自动观察子对象的属性。

引用： 引用： 来自我控制的另一个聚合物元素的更改。 通常情况下，我们通常让执行更改的元素发出事件以进行通信。

- Scott Miles

---

我知道这一点，但它并没有回答我的问题，即如何观察数组中的元素。我不想通过事件来实现它，因为我遇到了一个不同的问题，尝试弄清楚如何通过 ::shadow 获取目标 DOM 节点。 - user578895

没有办法观察数组中的所有对象，而不是为它们单独设置观察器，这是一个不好的想法（用你的话说是“不可持续的”）。使用事件是更好的方法，也许你可以更好地解释你的问题？建议避免尝试获取目标DOM节点，而是在event.detail中发送有用的信息。 - Scott Miles

Answer 2

有点晚了，但因为这个问题在谷歌上排名相当高，而且以上的解决方法都没有真正帮到你，所以我来提供一下我的解决方案：

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

基本版本将使用ArrayObserver，但仅在更改数组时触发，意味着添加、删除元素和替换条目时触发。但如果您想要观察数组中对象属性的更改-例如在您的情况下，那么使用CompoundObserver会更好，并通过addPath或addObserver（new PathObserver（obj，'...'））添加所有路径。但是，您必须遍历整个数组并在循环中添加所有观察到的属性。

- Kjell

Answer 3

你可以使用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
    });
},

更多 这里。

- Bob Woodley

---

Object.observe只有 Chrome 支持。 - user578895

不是这样的。有用的解决方案是可用的。 - user578895

有人写了一个针对此问题的polyfill：https://github.com/MaxArt2501/object-observe。 - Bob Woodley

类型错误：Object.observe 不是一个函数。 - Stan Sokolov

Answer 4

这个有文档可供参考

观察数组变化

- Stan Sokolov