Question

我正在写一个聚合物样本程序。我有一个模板如下所示：

＆＃13;

<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>

＆＃13;

我有一个按钮，如下图所示，单击调用函数f1（）：

＆＃13;

<button on-click="f1">Save</button>

＆＃13;

最初选中所有复选框。用户可以取消选中某些复选框，然后点击按钮。 f1（）收集用户已检查过的所有元素。执行f1后，我希望再次检查所有复选框。 f1（）的代码如下所示：

＆＃13;

//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;
    }
  }
}

＆＃13;

以下是dataArray元素的定义（我只是在控制台中打印）：

＆＃13;

//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
}

＆＃13;

我面临的问题是，在f1（）执行后，对checked属性所做的更改不会反映在UI中，即使我已经分配了要检查的数组中的所有值。我已经读过关于子属性没有直接反映但我不知道如何在这里使用notifyPath（）或如何使用数组变异方法。任何帮助表示赞赏。

Answer 1

您必须使用数组变异方法。未注意到数组中的更改，因此您必须调用notifyPath或仅使用array mutation methods。

Polymer：更改checked属性后未更新复选框元素

1 个答案: