Binding sub property of array element in Polymer - arrays

Question

I have simple iron-selector and dom-repeat. When I change sub property of selected item dom-repeat is not refreshed, but item of array is updated.
<dom-module id="my-element">
<template>
<iron-selector selected="{{selected}}" attr-for-selected="v">
<template is="dom-repeat" items="{{array}}">
<div v="{{item}}">{{item.summary}}</div>
</template>
</iron-selector>
<paper-input label="summary" value="{{selected.summary}}"></paper-input>
</template>
</dom-module>
Polymer({
is: "my-element",
properties: {
array: {
type: Array,
value: () => {
return [{summary: '1'}, {summary: '2'}, {summary: '3'}]
}
}
},
});
jsfiddle
I can not understand how bind sub-property of selected element and dom-repeat item.

Answer 1

array-selector should solve your binding issues.
<dom-module id="employee-list">
<template>
<h2> Employee list: </h2>
<template is="dom-repeat" id="employeeList" items="{{employees}}">
<div>
<button on-click="toggleSelection">Select</button>
<span>{{item.first}} {{item.last}} </span>
</div>
</template>
<array-selector id="selector" items="{{employees}}" selected="{{selected}}">
</array-selector>
<h3> Change {{selected.last}} first name: </h3>
<paper-input value="{{selected.first}}"></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: 'employee-list',
ready: function() {
this.employees = [
{first: 'Bob', last: 'Smith'},
{first: 'Sally', last: 'Johnson'},
];
},
toggleSelection: function(e) {
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item);
}
});
</script>
https://jsfiddle.net/aek6py7s/