简体   繁体   中英

Polymer 1.0 Dom-Repeat Bind Array

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM