Question

我试图将数组直接绑定到Polymer 2组件模板。它首先工作，但它没有检测到变化。我使用this.push方法来允许Polymer检测更改，但它不起作用。绑定到dom-repeat模板即可。

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

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

感谢您的帮助

Answer 1

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

[[json(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对象。在您的情况下，您更改数组的内容，然后绑定将不起作用。如果你想看到一些内容，你可以用以下内容更改HTML部分：

[[json(data.*)]]

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

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

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

有关详细信息，请查看聚合物文档here

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

1 个答案: