4

我有一个 Polymer dom-repeat 列表，其中孩子们可以按初始值排序。当我更改子项内部的 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>

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

4

2 回答 2

1

我必须添加Neil指出的 notify 参数，并将“观察”添加到模板中（来源：How to rerun dom-repeat with sort when bool property changed in Polymer element）。

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

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

于 2016-12-13T05:13:19.233 回答
1

在您的single-record组件中，您的record属性不允许双向数据绑定，因此它不会将该记录更改回list-records元素。要启用双向数据绑定，您必须record使用notify:true.

properties: {
  record: {
    type: Object,
    notify: true
  }
}

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

于 2016-12-12T22:48:57.280 回答