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

Question

我有一個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>

背景：在基於真實位置的應用程序中，我有一個中心位置（lat，lng），並獲得中心周圍位置的鍵列表。 我為每把鑰匙創造一個孩子。 孩子使用密鑰從數據庫中獲取lat，lng信息（異步）。 使用來自中心和位置的lat lng信息，我可以計算孩子內部的距離。 該列表應按計算的距離排序。

Answer 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

Answer 2

我必須按照Neil的指示添加notify參數，並對模板進行“觀察”（來源：如何在Polymer元素中更改bool屬性時重新運行dom-repeat和sort ）。

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

然后它在上面的示例代碼以及真正的地理位置應用程序中按預期工作:)

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

問題描述

2 個解決方案

解決方案1
1 2016-12-12 22:48:57

解決方案2
1 2016-12-13 05:13:19

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

問題描述

2 個解決方案

解決方案1 1 2016-12-12 22:48:57

解決方案2 1 2016-12-13 05:13:19

解決方案1
1 2016-12-12 22:48:57

解決方案2
1 2016-12-13 05:13:19