Polymer 1.0 Dom-repeat with paper-checkbox：取消选中数据更改

Question

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

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

下面是产生问题的代码（我只用 Chrome 测试过）。如果您单击第一个复选框，然后单击 "Random Items" 按钮，第一个复选框将保持选中状态。

我该如何避免呢？我试图将 checked 属性设置为 false (checked=false) 但它不起作用。当然可以通过 javascript 完成，但我希望避免它。

谢谢

Polymer({
     is: "wc-rnd-checkboxes",
     properties: {
         data: { type: Array, value: [1, 2, 3, 4, 5] }
     },

     handleRndGenerator: function() {
         this.data = [];
       
         //It simply generates an array of random length between 1 and 5.
         var length = Math.floor((Math.random() * 5) + 1)
         for (i=0; i < length; i++) {

             var irnd = Math.floor((Math.random() * 10) + 1);
             this.data.push(irnd);
         }

     }
 });

<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html"></script>

<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-button/paper-button.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-checkbox/paper-checkbox.html" />

    
<dom-module is="wc-rnd-checkboxes">
    <template>
        <paper-button on-click="handleRndGenerator" raised>Random Items</paper-button><br /><br />
        
        <template is="dom-repeat" items="{{data}}">
            <paper-checkbox></paper-checkbox>
            <span>{{index}}</span>
            <br />
        </template>
    </template>
  
</dom-module>

 <h3>Polymer Dom-repeat and paper-checkbox</h3>

<p>
    <b>Instructions:</b> 
    <ol>
        <li>click on the first checkbox;</li>  
        <li>click on generate "Random Items";</li>  
        <li>Issue: Polymer does not uncheck the first checkbox</li>
    </ol>
</p>
<wc-rnd-checkboxes></wc-rnd-checkboxes>

http://jsfiddle.net/mprej0j4/70/

Answer 1

在解释为什么 dom-repeat 中的复选框不像您预期的那样运行之前，让我指出我在您的 fiddle:

中发现的几个错误

polymer.html 不是脚本，因此您应该像这样使用 html 导入 <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html"> （我在下面的示例中使用 polygit 而不是 rawgit 但是是一样的）
为了将数据推送到将用于 dom-repeat 的数组属性中，您必须使用 this.push("arrayProperty", pushedValue) 否则 dom-repeat 将不会更新。（查看 guide 了解更多信息）

现在，至于复选框的问题，dom-repeat 的问题在于它非常高效，它延迟更新并且仅在完全必要时才添加或删除元素（基本上，当数组更改），因此它不会更新 template 的全部内容，而只会更新 remove/add 需要的内容。

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

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

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

例如，我做的数据数组有这样的结构：

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>

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

这里是 the fiddle，您可以在这里看到一切正常。

我希望这对您有所帮助，并没有让您离开 tl;dr XD

Polymer 1.0 Dom-repeat with paper-checkbox：取消选中数据更改

Polymer 1.0 Dom-repeat with paper-checkbox: uncheck on data changing

javascript

checkbox

polymer

polymer-1.0