聚合物：更改选中属性后未更新复选框元素答案

【问题标题】：Polymer: Checkbox elements not being updated after changing the checked property聚合物：更改选中属性后未更新复选框元素
【发布时间】：2018-05-06 11:01:31
【问题描述】：

我正在用聚合物编写一个示例程序。我有一个如下所示的模板：

<template is="dom-repeat">
   <li class="clearfix title-container">
      <input type="checkbox" checked="{{item.checked::change}}" class="checkbox-container float--left" />
      <label class="label-container">{{item.id}}</label>
   </li>
 </template>

点击调用哪个函数 f1() 时，我有一个如下所示的按钮：

&lt;button on-click="f1"&gt;Save&lt;/button&gt;

最初所有复选框都被选中。用户可能会取消选中某些复选框，然后单击按钮。 f1() 收集用户检查过的所有元素。执行 f1 后，我希望再次选中所有复选框。 f1() 的代码如下所示：

//Collect all the selected items in a separate array.
//Revert unchecked checkboxes to checked.
f1: function() {
  newIndex = 0;
  for (index = 0; index < this.dataArray.features.length; index++) {
    if (this.dataArray.features[index].checked) {
      this.newDataArray.selectedElements[newIndex++] = this.dataArray.features[index];
    } else {
      this.dataArray.features[index].checked = true;
    }
  }
}

下面是dataArray元素的定义（我只是在控制台打印出来的）：

//The dataArray when printed in a console
{
  type: "FeatureCollection",
  features: Array(4)
}
features: Array(4) 0: {
  type: "Feature",
  checked: true
}
1: {
  type: "Feature",
  checked: true
}
2: {
  type: "Feature",
  checked: true
}
3: {
  type: "Feature",
  checked: true
}

我面临的问题是，在 f1() 执行后，对已检查属性所做的更改不会反映在 UI 中，即使我已经分配了要检查的数组中的所有值。我已经阅读了关于不直接反映子属性的信息，但我不明白如何在此处使用 notifyPath() 或如何使用数组突变方法。任何帮助表示赞赏。

【问题讨论】：

标签： polymer javascript-databinding

【解决方案1】：

你必须使用数组变异方法。Polymer 不会注意到数组的变化，所以你必须调用notifyPath 或只使用array mutation methods。

【讨论】：