2016-12-12 4 views
4

私は子供がソートされたポリマードームリピートリストを持っています。初期値に戻す。 子の中のaの値を変更すると、リストの依存するソート順は更新されません。どのように私はそれを達成するのが最善でしょう?子供の値を変更した後、ポリマーのDOM-リピートを行います。

<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)を持ち、中心付近の位置のキーのリストを取得します。私は各キーの子を作成します。子はキーを使用してデータベースから孤立した情報を取得します(非同期)。センターと場所からの緯度経度情報を使用して、子供の中の距離を計算することができます。リストは、計算された距離で並べ替えられます。

答えて

1

お客様のsingle-recordコンポーネントでは、recordプロパティは双方向データバインディングを許可しないため、そのレコードはlist-records要素に戻されません。双方向データバインディングを有効にするには、notify:truerecordプロパティを宣言する必要があります。

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

出典:https://www.polymer-project.org/1.0/docs/devguide/properties

1

私はNeilで指摘しても、テンプレート(:How to re run dom-repeat with sort when bool property changed in Polymer elementソース)に「観察」として通知パラメータを追加する必要がありました。のみ観察=「値」を設定することにより、上記と同様に実際のジオロケーションアプリケーション:)

+0

上記の例では、動作のサンプルコードで期待どおり

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

そしてそれが動作します。私は通知を設定する必要はありませんでした。参照:https://plnkr.co/edit/6MoJqj?p=preview –

関連する問題