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中的复选框没有按照您的预期行事之前，让我指出我在你的小提琴中发现的一些错误：

polymer.html不是一个脚本，所以你应该像这样使用html导入<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html">（我在下面的示例中使用polygit而不是rawgit但是它是一样的）< / LI>
为了将数据推送到将用于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，你可以看到一切正常。

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

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

1 个答案: