Javascript Polymer 1.0 Dom用纸重复复选框：在数据更改时取消选中

我使用dom repeat和数据数组中的项目动态生成纸质复选框元素。更新数组时，复选框会正确更新，但Polymer不会将checked属性重置为false。因此，如果数据发生更改，复选框将正确更新，但仍保持选中状态

在我看来，dom repeat通过简单地更改其属性来重用以前创建的复选框。因此，当用户单击第一个复选框时，当dom repeat重新生成纸张列表复选框时，它也保持选中状态

下面是产生问题的代码（我只使用Chrome进行了测试）。如果单击第一个复选框，然后单击“随机项目”按钮，则第一个复选框将保持选中状态

我怎样才能避免它？我试图将checked属性设置为false（checked=false），但它不起作用。当然，这可以通过javascript实现，但我希望避免它

谢谢

聚合物({ is:“wc rnd复选框”， 特性：{ 数据：{类型：数组，值：[1,2,3,4,5]} }, handleRndGenerator:函数（）{ 这个.data=[]； //它只是生成一个长度介于1和5之间的随机数组。 变量长度=数学地板（（数学随机（）*5）+1） 对于（i=0；i

随机项目


{{index}}


聚合物Dom重复和纸张复选框

说明：
单击第一个复选框
点击生成“随机项目”
问题：Polymer没有取消选中第一个复选框

在解释为什么

dom repeat

中的复选框的行为不符合您的预期之前，让我指出我在您的小提琴中发现的几个错误：

polymer.html

不是一个脚本，因此您应该像这样使用html导入

（在下面的示例中，我使用的是polygit而不是rawgit，但它是相同的）

要将数据推入将用于

dom repeat

的数组属性，必须使用

this.push（“arrayProperty”，pushedValue）

，否则

dom repeat

不会更新。（有关这方面的更多信息，请查看）

现在，关于复选框的问题，

dom repeat

的问题是它非常有效，它会延迟更新，并且只在完全必要时添加或删除元素（基本上，当数组大小改变时），因此，它不会更新

模板的全部内容，只会删除/添加所需内容

这正是这里发生的事情，即使您正在将数组更改为一个全新的数组，因为
dom repeat
只有在您用新值填充完
数据后才会更新，它只会根据数组的新大小删除或添加复选框，并将已有复选框的数据绑定更新为新数据

数据绑定更新是关键部分，因为复选框
checked
属性（或任何其他属性）没有任何数据绑定，所以每个未删除的复选框都将保持其在数据更改之前的状态

实现所需行为的一种方法是更改
数据
数组的结构，并在数组项和复选框属性之间创建数据绑定

例如，我使数据数组具有以下结构：

data = [{num: 1, checked: false}, {num: 2, checked: false}, {num: 3, checked: false}, {num: 4, checked: false}, {num: 5, checked: true}];

而
dom repeat
看起来像这样：

<template is="dom-repeat" items="{{data}}">
    <paper-checkbox checked="{{item.checked}}"></paper-checkbox>
    <span>{{item.num}}</span>
    <br />
</template>


{{item.num}



这样，复选框将绑定到数组中相应元素的
checked
属性

在这里你可以看到一切都在运转

我希望这对你有所帮助，而不是让你走；XD博士
非常感谢您花时间阅读并详尽回答。您的解决方案是干净的，提供的fiddle解决方案非常有用。谢谢