I have a Polymer dom-repeat list where the children get sorted o.k. on the initial value. When I change the a value inside of the child, the depending sort order of the list is not updated. How can I best achieve that?
<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>
Background: In the real location based application I have a center location (lat, lng) and get a list of keys for locations around the center. I create a child for each key. The child uses the key to get lat,lng information from a database (async). Using the lat lng information from center and from the location, I can calculate the distance inside the child. The list should be ordered by the calculated distance.
I had to add the notify parameter as pointed out by Neil and also 'observe' to the template (source: How to re run dom-repeat with sort when bool property changed in Polymer element).
Then it works as expected in the sample code above as well as in the real geo-location application :)