如何在Polymer 1.0中排序鐵列表？

我正在尋找排序鐵列表中的數據（並且將它們添加到數據數組中的項目進行排序）。如何在Polymer 1.0中排序鐵列表？

樣品（未分類）JSON數據：

[ 
    {"name": "Zebra"}, 
    {"name": "Alligator"}, 
    {"name": "Lion"} 
]

我已經使用indexAs財產，但API如下排序的iron-list嘗試並不清楚如何使用它：

<iron-ajax url="./data.json" last-response="{{data}}" auto></iron-ajax> 
<iron-list items="[[data]]" as="item" index-as="name" class="fit"> 
    <template> 
    <div> 
     Name: <span>[[item.name]]</span> 
    </div> 
    </template> 
</iron-list>

來源

2015-08-14 David Douglas

'指數as'來，你可以索引變量綁定到更多的東西meaningfull打印索引列在屏幕上。你可能會想使用一個函數來返回排序後的數據。 –

我不確定是否有更多的本地聚合物的方式來做到這一點，但它自己構建排序邏輯並不太複雜。

的想法是聽response事件，從服務中的數據進行排序，然後綁定iron-list的items到sortedData。

您需要將on-response="_onResponseReceived"添加到iron-ajax。然後這只是對返回的數據進行排序的問題。

_onResponseReceived: function() { 
    this.sortedData = this.data.sort(this._compare); 
}, 

_compare: function (a, b) { 
    if (a.name < b.name) 
     return -1; 
    if (a.name > b.name) 
     return 1; 
    return 0; 
}

當然的iron-list現在需要進行更新，以

<iron-list items="[[sortedData]]" ...>

來源

2015-08-14 14:23:55

如果您的數據源是「'而不是''，該怎麼辦？對於這種情況的任何想法？ – Mowzer

@Mowzer，我沒有使用過''，但我想必須有一個類似於'response'的事件嗎？ –

編號''沒有以通常的方式實現ajax。這是一個數據綁定。它使用國家驅動的方法。（不像常規ajax那樣事件驅動）。你或者（準連續）「連接」或者不連接。有一個'disconnect（）'方法，但我不認爲這對於這個目的是有用的。 – Mowzer

有聚合物1.2.4如果您想將iron-list以動態方式進行排序，你還可以利用this.querySelector('iron-list').notifyResize();優勢來強制在更新觀察者中的sortedItems數組後刷新。這是一個黑客，但如果你不這樣做，不幸的是聚合物不會刷新你的名單。讓我們id或name我們的項目進行排序：

<template> 
    <paper-icon-button icon="expand-more" on-tap="_sortItems" sort-option="id"></paper-icon-button> 
    <paper-icon-button icon="expand-more" on-tap="_sortItems" sort-option="name"></paper-icon-button> 

    <iron-list items="[[sortedItems]]"> 
     <template> 
      <p>[[item.name]]<p> 
     </template> 
    </iron-list> 
</template> 
... 
properties: { 
    ... 
    sortByTerm: { 
     type: String, 
     value: 'id' 
    }, 
    sortByOrder: { 
     type: Number, 
     value: -1 // Descending order 
    }, 
}, 
observers: [ 
    'sortingObserver(items.*, sortByTerm, sortByOrder)' 
], 
sortingObserver: function(items, sortByTerm, sortByOrder) { 
    var sortedItems = [], 
    validSortingOptions = ['id', 'name']; 

    if (validSortingOptions.indexOf(sortByTerm) != -1) { 
     sortedItems = items.base.sort(this._computeSort(sortByTerm, sortByOrder)); 
    } else { 
     sortedItems = items.base; 
    } 

    this.set('sortedItems', sortedItems); 
    this.querySelector('iron-list').notifyResize(); 
}, 
_computeSort: function(property, order) { 
    return function(a, b) { 
     if (a[property] === b[property]) { 
      return 0; 
     } 
     return (order * (a[property] > b[property] ? 1 : -1)); 
    }; 
}, 
_sortItems: function(e) { 
    var sortByTerm = e.currentTarget.getAttribute('sort-option'); 
    this.set('sortByTerm', sortByTerm); 
}, 
...

來源

2016-02-11 01:36:42

如何在Polymer 1.0中排序鐵列表？

回答

相關問題