Question

这是Polymer中关于更新模型时更新视图的常见问题（答案是使用this.set或this.push Polymer方法）。

但是当我有两个元素时：

第一个要素：

properties:{
  items: {
    type: Array
  }
},

someFunction: {
  this.push('items', {'Name': 'something'});
}

第二个元素具有与第一个元素

中的“项目”绑定的属性

ready: function(){
    this.items = firstElement.items;
}

我希望在firstElement上更新'items'时更新第二个元素'items'。由于应用限制，我无法手动通知secondElement。

所以现在我看到（在devTools中）第二个元素的模型是正确的（'items'包含对象），但是视图没有更新。

如何更新？

Answer 1

您需要在第一个元素的属性上设置notity以接收元素本身之外的更改

properties:{
  items: {
    type: Array,
    notify: true
  }
},

然后，在secondElement中你可以

<firstElement items="{{items}}" />

Answer 2

让Polymer two-way binding为您处理通知。

在容器元素x-foo中考虑两个元素x-bar和x-app。

在x-foo中，使用items声明notify:true，以便其更改将向上传播。

Polymer({
  is: 'x-foo',
  properties: {
    items: {
      type: Array,
      value: function() { return []; },
      notify: true
    }
  }
});

在x-app中，将x-foo的{{1}}绑定到items。
```
x-bar
```
现在，<dom-module id="x-app"> <template> <x-foo items="{{items}}"></x-foo> <x-bar items="[[items]]"></x-bar> </template> <script> Polymer({ is: 'x-app' }); </script> </dom-module>会通知x-bar数组的所有更改（添加/删除项目时）。

items

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-app'
  });
  
  Polymer({
    is: 'x-foo',
    properties: {
      items: {
        type: Array,
        value: function() { return []; },
        notify: true
      }
    },

    _addItem: function() {
      this.push('items', {name: 'item' + this.items.length});
    }
  });
  
  Polymer({
    is: 'x-bar',
    properties: {
      items: {
        type: Array
      }
    }
  });
});

codepen

聚合物。模型更改后更新视图

2 个答案: