在改变孩子的价值后重新排序聚合物dom-repeat

时间:2016-12-12 21:23:15

标签: javascript sorting polymer dom-repeat

我有一个Polymer dom-repeat列表,其中孩子们被排序o.k.在初始值上。 当我更改子项内部的a值时,不会更新列表的依赖排序顺序。我怎样才能最好地实现这一目标?

<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)并获取中心周围位置的键列表。我为每把钥匙创造一个孩子。孩子使用密钥从数据库中获取lat,lng信息(异步)。使用来自中心和位置的lat lng信息,我可以计算孩子内部的距离。该列表应按计算的距离排序。

2 个答案:

答案 0 :(得分:1)

Highcharts.setOptions({ lang: { thousandsSep: ',' } }); 组件中,您的single-record属性不允许双向数据绑定,因此它不会将该记录更改回record元素。要启用双向数据绑定,您必须使用list-records声明record属性。

notify:true

来源:https://www.polymer-project.org/1.0/docs/devguide/properties

答案 1 :(得分:1)

我必须按照Neil的指示添加notify参数,并且还要观察&#39;到模板(来源:How to re run dom-repeat with sort when bool property changed in Polymer element)。

<template id="list"
          is="dom-repeat" 
          items="{{records}}"
          sort="sortByValue"
          observe="value">

然后它在上面的示例代码以及真实的地理位置应用程序中按预期工作:)