Question

我正在尝试使用dom-repeat这样的模板呈现项目的动态列表：

<template is="dom-repeat" items={{numbers}} as="anumber" >
  <div>
    {{anumber}}
    <paper-button class="deleteThisNumber" index={{index}}></paper-button>
  </div>
</template>
<paper-button id="addNumber"></paper-button>

每个项目都有一个删除此项目的按钮。

dom-repeat模板还有一个按钮，用于向数组numbers添加条目。 JS看起来像这样：

Polymer ({

is: "something",

properties: {
    numbers: {
        type: Array,
        value: ["1"]
    }
},
removeByIndex: function (array, index) {
    return array.filter(function (elem, _index) {
        return index != _index;
    });
},
attached: function () {
    var myself = this;
    $(this).on('click', '.deleteThisNumber', {}, function (e) {
        myself.numbers = myself.removeByIndex(myself.numbers, this.index)
    });
    this.$.addNumber.addEventListener("click", function (e) {
        myself.numbers.push("123");
    })
},
...
});

结果是：删除作品，但不添加。

通过说＆＃34; works＆＃34;，我的意思是该列表通过添加/删除DOM中的条目来反映更改。我检查了属性numbers它是否一直被正确修改。那么，如果更改是添加（array.push），为什么Polymer不会将数组属性的更改反映到模板？我该怎么解决这个问题？（除了手动添加div之外，我愿意接受任何建议。）

我的聚合物版本是1.X

Answer 1

将阵列推送的代码更改为：

    this.$.addNumber.addEventListener("click", function(e) {
      myself.push("numbers", "123");
    })

必须有可观察的更改才能呈现更新的属性或子属性。 可观察更改是Polymer可以与路径关联的数据更改。

如果使用本机方法（如Array.prototype.push）操作数组，则必须在事后通知Polymer。或者，使用Polymer方法进行数组突变。

修改数组时，会提供一组数组变异方法   模拟Array.prototype方法的聚合物元素原型   他们将path字符串作为第一个参数的例外情况。该   path参数标识要变异的元素上的数组，使用   以下参数匹配本地Array方法的参数。

这些方法对数组执行变异操作，然后   通知可能绑定到同一数组的其他元素   变化。变异数组时必须使用这些方法以确保   观察数组的任何元素（通过观察者计算   属性或数据绑定）保持同步。

每个Polymer元素都有以下数组变异方法   可用的：
push(path, item1, [..., itemN]) 
pop(path) 
unshift(path, item1, [...,
itemN])
shift(path)
splice(path, index, removeCount, [item1, ..., itemN])

Learn More

Answer 2

我发现解决方案是强制使用notifyPath：

myself.numbers.push("123"); //before only has this
myself.notifyPath('numbers', myself.numbers.slice()); //added

提到https://github.com/Polymer/polymer/issues/2068#issuecomment-120767748

来自@miyconst的答案

Answer 3

您可以通过多种方式修复代码。

1）删除项目时已经使用的方式。

this.$.addNumber.addEventListener("click", function (e) {
    myself.numbers.push("123");
    myself.numbers = myself.numbers.slice();
})

2）自己回答（略有变化）

this.$.addNumber.addEventListener("click", function (e) {
    myself.numbers.push("123");
    myself.notifyPath("numbers");
})

3）来自@Ofisora的回答

this.$.addNumber.addEventListener("click", function(e) {
    myself.push("numbers", "123");
})

以下是修复工作的原因https://www.polymer-project.org/1.0/docs/devguide/data-system#observable-changes

将项添加到数组不会重新渲染聚合物模板

3 个答案: