Two way data binding in dom-repeater

601 views Asked by At

I'm trying to create a two way data binding between inputs in a dom-repeater and the template but changes seem to not propagate back. What am I doing wrong?

<dom-module id="record-card">
    <template id="node">
        <template is="dom-repeat" items="{{labels}}">
            <h1>
                <input is="iron-input" bind-value="{{item}}" on-change="labelsChanged">
            </h1>
        </template>
        <input is="iron-input" bind-value="{{labels.0}}">
        Labels: <span>{{labels}}</span>
    </template>
</dom-module>

<script>
Polymer({
    is: "record-card",
    properties: {
        labels: {
            type: Array,
            notify: true,
            value: function() {
                return ["Pizza", "Person"]
            }
        }
    }
});

</script>

The input in the dom repeater doesn't propagate, the input outside of it using the path propagates into the repeater but not the other way around but it doesn't update the {{}}.

2

There are 2 answers

2
Filip Frącz On

I asked a similar question (How to two-way bind iron-input to dom-repeat's item?) and the answer I got was to use value="{{item::input}}. However, it seems like binding to a raw array of strings is not working very well. I tried changing it to an array of objects with a single string property and that did it.

http://plnkr.co/edit/X6b3FqZIY29tiGYoHnzq

0
Quang Le On

Here is how I deal with data changed in nested dom-repeat

http://plnkr.co/edit/Y0P5vNxg46t5fX7gJFxU?p=preview

// Add Task to the selected Employee
_addTask: function() {
 var i=this._getSelectedEmployeeIndex()
 if (i>=0) {
   var employee = this.employees[i]
   // use both for child dom-repeat
   this.push('employees.'+i+'.tasks', {name: this._random(this.__tasks)})
   this.notifyPath('employees.'+i+'.tasks.*')
 }
},