In my try to update to Polymer 1.0 I got the following problem with Data-Binding:
My Polymer 0.5 Webapp uses a Repeat-Template to generate Checkboxes for some Categories. All checked
values are bound to an array ( sortedCatsArray
) with the category-ids as key. Here is my first attempt to update that part to Polymer 1.0, but it doesn't work...
<template is="dom-repeat" items="{{sortedCatsArray}}" as="category">
<paper-checkbox for category$="{{category.id}}" checked="{{filterChkboxes[category.id]}}"></paper-checkbox>
</template>
As you may read in the docs , it is no longer possible to bind to Array-Properties with square-brackets (now that way: object.property
). May anybody tell me if it's still possible to bind all generated checkbox-values in one array?
Update #1
As you may read in the docs , Array-Binding by index is not supported. So I tried to use that example from the docs for my case and wrote the following code. If I run this code, it seems to work as expected: the first and third checkbox is checked. But I also want the array to be changed if I manual check/uncheck a checkbox. That does not happen, only if I change the array (in the ready
-function) the checkbox gets checked...
<dom-module id="my-index">
<link rel="import" type="css" href="/css/index.css">
<template>
<template is="dom-repeat" items="{{sortedCatsArray}}" as="category">
<paper-checkbox for category$="{{category.id}}" checked="{{arrayItem(filterChkboxes.*,category.id)}}" on-change="test"></paper-checkbox>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "my-index",
properties: {
filterChkboxes: {
type: Array,
notify: true,
observer: "filterChkboxesChanged",
value: function(){return[true,false,true,false];}
},
sortedCatsArray: {
type: Array,
value: function(){return[{id: 0}, {id: 1},{id: 2},{id: 3}]},
notify: true
},
},
ready: function(){
this.set('filterChkboxes.1',true);
},
test: function(){
console.log(this.filterChkboxes);
},
observers: [
'filterChkboxesChanged(filterChkboxes.*)'
],
arrayItem: function(array, key){
return this.get(key, array.base);
},
filterChkboxesChanged: function(changes){
console.log(changes);
},
});
</script>
As stated in the docs you cannot have expressions in binding annotations. Instead of checked="{{filterChkboxes[category.id]}}"
define a computed property and replace it with something like checked="{{get_filterChkboxes(category.id)}}"
where get_filterChkboxes
is a computed property that you should define accordingly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.