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

Question

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

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

下面是产生问题的代码(我只在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没有像你期望的那样,让我指出我在你的小提琴中发现的一些错误:

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将不会更新.(查看指南以获取更多信息)

现在,至于复选框的问题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数组中相应元素的属性.

这是你可以看到一切正常的小提琴.

我希望这有所帮助,并没有让你去; XD博士