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

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

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

在您的示例中，您有一个标签列表。您可以观察到 "tags" 数组（add/remove 项）的任何更改，因为 "tags" 它是元素的属性。但是您不能 "monitor" 更改标签内部属性。（Object.Observe 可以做到这一点，但 Polymer 1.0 不会将其用于 performance/compatibility 问题）。

对于您的具体示例，如果您需要在用户选中标签时执行某些操作，您可以将事件处理程序属性添加到 paper-checkbox。在事件处理程序中，您可以使用模板方法 itemForElement returns 绑定对象（在您的情况下为标记）。

有关如何使用 itemForElement 的简单示例，请参见此处： http://jsbin.com/lofarabare/edit?html,output

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

Observe of array elements in Polymer not working for boolean bindings

typescript

polymer

polymer-1.0