我有简单的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'}]
}
}
},
});
我无法理解所选元素和dom-repeat项的绑定子属性如何。
答案 0 :(得分: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>