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

Question

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

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

下面是产生问题的代码（我只用 Chrome 测试过）。如果单击第一个复选框，然后单击“随机项”按钮，则第一个复选框仍处于选中状态。

我该如何避免呢？我试图将选中的属性设置为 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 中的复选框不符合您的预期之前，让我指出我在您的小提琴中发现的几个错误：

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

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

这正是这里发生的事情，即使您将数组更改为一个全新的数组，因为 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