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 {{}}
.
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