Question

使用PolymerTS扩展。我试图使用通配符表示法观察数组的变化：

@component("ha-tags")
class HaTags extends polymer.Base implements polymer.Element {
    @property({ type: Array, notify: true })
    public tags: Array<HaTag> = [];

    @observe("tags.*")
    tagsChanged(changeRecord) {
        alert(changeRecord);
    }

}

HaTags.register();

只要我使用以下内容设置数组元素的值，这就可以正常工作：

this.set("tags.0.selected", true)

但是如果我通过绑定更改了值，则不会调用tagsChanged函数：

<template is="dom-repeat" items="[[tags]]">
  <paper-icon-item role="menuitemcheckbox">
    <paper-checkbox item-icon checked="{{item.selected}}"></paper-checkbox>
    <div class="flex">[[item.plurName]]</div>
  </paper-icon-item>
</template>

结果：当我勾选或取消勾选复选框时，所选的值会更改，但不会调用tagsChanged。

Answer 1

聚合物观察器仅适用于在聚合物元素中声明为属性的属性。它不适用于子属性。（聚合物1.0不观察子属性）

在您的示例中，您有一个标记列表。您可以观察到对“tags”数组的任何更改（添加/删除项目），因为“tags”它是元素的属性。但是你无法“监控”对标签内部属性的更改。（这可以通过Object.Observe实现，但Polymer 1.0不会将其用于性能/兼容性问题。）

对于您的具体示例，如果您需要在用户检查标记时执行某些操作，则可以向纸张复选框添加事件处理程序属性。在事件处理程序中，您可以使用模板方法 itemForElement 返回绑定对象（在您的情况下为标记）。

可以在此处找到如何使用 itemForElement 的简单示例： http://jsbin.com/lofarabare/edit?html,output

观察Polymer中的数组元素不适用于布尔绑定

1 个答案: