logo标签列表

在子元素值改变后重新排序Polymer dom-repeat

javascriptsortingpolymerdom-repeat
4
我有一个 Polymer 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>

背景：在真实的基于位置的应用程序中，我有一个中心位置（纬度，经度），并获取围绕中心的位置的密钥列表。我为每个密钥创建一个子项。子项使用密钥从数据库（异步）获取纬度，经度信息。使用来自中心和位置的纬度经度信息，我可以计算子项内的距离。该列表应按照计算出的距离排序。

2个回答
1
在你的single-record组件中，record属性不允许双向数据绑定，因此它无法将该记录更改回list-records元素。要启用双向数据绑定，必须使用notify:true声明record属性。
properties: {
  record: {
    type: Object,
    notify: true
  }
}

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

1
上面给出的示例仅通过设置observe="value"才能工作。我不必设置notify。请参见：https://plnkr.co/edit/6MoJqj?p=preview - Syed Osama Maruf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接