如果使用dom-repeat在紙張對話框上選中了復選框，如何顯示值

Question

如果使用dom-repeat在紙張對話框中選中了復選框，如何顯示值。在控制台中，它以陣列形式打印。 我想在紙上對話上也一樣。 有什么建議么？ 我已經為checktext完成了單綁定和雙綁定，但是對於多個復選框，它只顯示一個值。

 Polymer({ is: 'check-list', properties: { checkdata: { type: Array, value: [{ name: 'Bike', checked: false }, { name: 'Car', checked: false }, { name: 'Cycle', checked: false }, { name: 'Bus', checked: false }, { name: 'Truck', checked: false }], }, }, checkall: function() { var checkvalue = this.checkdata; var checktext = []; for (i = 0; i < checkvalue.length; i++) { if (checkvalue[i].checked == true) { checktext.push(checkvalue[i].name); this.checkeditem = checktext; } } console.log(checktext); } }); 

 <base href="https://polygit.org/polymer+polymer+v1.11.2/components/" /> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html" /> <link rel="import" href="paper-checkbox/paper-checkbox.html" /> <check-list></check-list> <dom-module id="check-list"> <template> <template is="dom-repeat" items="{{checkdata}}"> <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox> </template> </template> </dom-module> 

Answer 1

如果我了解問題，那是checkeditem沒有正確更新嗎？ 我認為這是因為您在我們的for循環中擁有它。 如果將它移到外面，它應該可以正常工作。

 Polymer({ is: 'check-list', properties: { checkdata: { type: Array, value: [{ name: 'Bike', checked: false }, { name: 'Car', checked: false }, { name: 'Cycle', checked: false }, { name: 'Bus', checked: false }, { name: 'Truck', checked: false }], }, }, checkall: function() { var checkvalue = this.checkdata; var checktext = []; for (i = 0; i < checkvalue.length; i++) { if (checkvalue[i].checked == true) { checktext.push(checkvalue[i].name); } } this.checkeditem = checktext; } }); 

 <base href="https://polygit.org/polymer+polymer+v1.11.2/components/" /> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html" /> <link rel="import" href="paper-checkbox/paper-checkbox.html" /> <check-list></check-list> <dom-module id="check-list"> <template> <template is="dom-repeat" items="{{checkdata}}"> <paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox> </template> <ul> <template is="dom-repeat" items="{{checkeditem}}"> <li>{{item}}</li> </template> </ul> </template> </dom-module> 

另外，當我在這里時，您可以將checkall功能簡化為

checkall: function() {
  let checktext = [];
  for (let checkvalue of this.checkdata) {
    checkvalue.checked && checktext.push(checkvalue.name);
  }
  this.checkeditem = checktext;
}

希望你覺得這有用useful