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

Question

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

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

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

我该如何避免呢？我试图将 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 中发现的几个错误:

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使用它的新值，它只会根据数组的新大小删除或添加复选框，并且更新已经存在的复选框的数据绑定(bind)到新数据。

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

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

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

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>

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

这是 the fiddle在那里你可以看到一切正常。

我希望这对您有所帮助，但不会让您失望 tl;dr XD