如何将数组绑定到 Polymer 2 中的组件模板？

Question

我正在尝试将数组直接绑定到 Polymer 2 组件模板。它起初有效，但随后检测不到变化。我正在使用 this.push 方法以允许 Polymer 检测更改，但它不起作用。绑定到 dom-repeat 模板就可以了。

在这里你可以找到一个 Plunker：http://plnkr.co/edit/MWO7i7m3GB5b7Eqri1yX?p=preview

是否可以做我正在尝试的事情？我做错了什么？

感谢您的帮助

Answer 1

不，不可能像这样绑定到数组。

[[json(data)]]如果data是数组，就不行了。

观察者也一样：

static get observers(){
    return [
        '_dataChanged(data)'
    ]
}

这行不通。

在直接绑定中，唯一的工作方式是将整个数组值更改为另一个值。

class ParentElement extends Polymer.Element {
  static get is() { return "parent-element"; }
  static get properties(){
    return {
      data: {
        type: Array,
        notify: true,
        value: function(){
          return [{name: 'first'}]
        }
      }
    }
  }

  constructor() {
    super();
  }

  json(data){
    return JSON.stringify(data);
  }

  addChild(){
    this.data = [{name: 'first'},{name: 'second'}];
  }
}
customElements.define(ParentElement.is, ParentElement);

在上面的这种情况下，您可以看到 data 数组已被完全替换并且它将起作用，因为它是 data 对象发生了变化。在您的情况下，您更改了数组的内容，那么绑定将不起作用。如果你想看到一些东西，你可以在 plunker 中更改 HTML 部分：

[[json(data.*)]]

然后您将看到发生变化的聚合物绑定对象。但是最好不要像你那样绑定数组，最好是使用观察者并在函数中执行我们的操作：

static get observers(){
    return [
        '_dataChanged(data.splices)'
    ]
}

_dataChanged(value){
    //work to do here
}

有关更多详细信息，您可以查看聚合物文档 here

如何将数组绑定到 Polymer 2 中的组件模板？

How to bind an array to the component template in Polymer 2?

polymer

polymer-2.x