ポリマー中の配列要素のサブプロパティの結合

Question

私は単純なiron-selectorとdom-repeatを持っています。選択した項目のサブプロパティを変更すると、dom-repeatはリフレッシュされませんが、配列の項目が更新されます。

<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

私はどのように結合し、選択した要素とDOMリピートアイテムのサブプロパティを理解することはできません。

Answer 1

array-selectorは、バインディングの問題を解決するはずです。

<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/