javascript - 如何观察数组或对象中任何属性的变化？

Question

我想做这样的事情

    Polymer('bc-datalist', {
        listitems: [
            {name: 'item1'},
            {name: 'item2'}
        ],
        observe: {
            'listitems': 'change'
        },
        change: function () {
            // do something
        }
    });

这行不通，所以我的工作是做这样的事情:

    Polymer('bc-datalist', {
        listitems: {
            1:{name: 'item1'},
            2:{name: 'item2'}
        },
        observe: {
            'listitems.1.name': 'change',
            'listitems.2.name': 'change'
        },
        change: function () {
            // do something
        }
    });

有没有办法在对象/数组项更改时注册回调？

Answer 1

如果我错了请纠正我，但您的第一个示例中似乎有错字。在您打算引用 listitems 作为要观察的对象的地方，您引用了 listitem。将其更改为 listitems 将使普通顶级属性起作用:

<polymer-element name="test-el">
  <template>
    <button on-click="{{clickHandler}}">Click me</button>
  </template>
  <script>
    Polymer('test-el', {
        listitems: [
            {name: 'item1'},
            {name: 'item2'}
        ],
        observe: {
            'listitems': 'change'
        },
        change: function () {
            // do something
            alert('listitems changed!');
        },
        clickHandler: function(){
          this.listitems.push({ name: 'item3'});
        }
    });
</script>
</polymer-element>

关于您的问题:据我所知，Polymer 不会为观察 block 中包含的属性调用 propertyNameChanged 回调。这意味着您需要为您尝试观察的对象指定确切的嵌套对象路径 (a.b.c)，或者手动设置相关类型的路径/复合观察器:https://github.com/Polymer/observe-js