0

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

<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() 时，我有一个如下所示的按钮：

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

最初，所有复选框都被选中。用户可能会取消选中某些复选框，然后单击按钮。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() 或如何使用数组突变方法。任何帮助表示赞赏。

4

1 回答 1

0

您必须使用数组变异方法。Polymer 不会注意到数组的变化，因此您必须调用notifyPath或只使用数组变异方法。

于 2017-11-23T08:07:11.983 回答