我有一个聚合物dom-repeat列表,孩子们在其中分类了。关于初始值。当我更改孩子内部的一个值时,列表的依赖顺序不会更新。我怎么能最好地实现?
<body>
<list-records></list-records>
<dom-module id="list-records">
<template>
<template is="dom-repeat"
items="{{records}}"
sort="sortByValue">
<single-record record="{{item}}"
base="{{base}}">
</single-record>
</template>
</template>
<script>
Polymer({
is: 'list-records',
properties: {
records: {
type: Array,
value: [
{number:1, value:4},
{number:2, value:2},
{number:3, value:3}]
}
},
sortByValue: function(a, b) {
if (a.value < b.value) return -1;
if (a.value > b.value) return 1;
return 0;
}
});
</script>
</dom-module>
<dom-module id="single-record">
<template>
<div>
Number: <span>{{record.number}}</span>
Value: <span>{{record.value}}</span>
<button on-tap="_add">+</button>
</div>
</template>
<script>
Polymer({
is: 'single-record',
properties: {
record: Object,
},
_add: function() {
this.set('record.value', this.record.value + 1);
}
});
</script>
</dom-module>
</body>
背景:在基于实际位置的应用程序中,我有一个中心位置(LAT,LNG),并获取中心周围位置的钥匙列表。我为每个键创建一个孩子。孩子使用密钥从数据库(async)获取LAT,LNG信息。使用中心和位置的LAT LNG信息,我可以计算孩子内部的距离。列表应按计算距离进行排序。
在您的single-record
组件中,您的record
属性不允许双向数据绑定,因此不会将记录重新更改为list-records
元素。要启用双向数据绑定,您必须使用notify:true
声明record
属性。
properties: {
record: {
type: Object,
notify: true
}
}
来源:https://www.polymer-project.org/1.0/docs/devguide/properties
我必须添加Neil指出的Notify参数,并在模板中'观察')。
<template id="list"
is="dom-repeat"
items="{{records}}"
sort="sortByValue"
observe="value">
然后,它在上面的示例代码以及实际地理位置应用程序中按预期工作:)