2015-10-15 68 views
7

dom-repeat元素提供filter屬性。如何過濾聚合物1.0中的鐵清單?

有沒有類似的方法來篩選iron-list

例如:給定一個人名單,我想過濾出生在特定城市的名單。

+0

聽起來像後臺任務 – user656449

+0

你可能想學習['鐵數據table'(HTTPS: //saulis.github.io/iron-data-table/)。 https://saulis.github.io/iron-data-table/ – Mowzer

回答

10

由於iron-list不幸的是不提供filter屬性,沒有聲明模式使這成爲可能。

您可以使用dom-repeat的過濾器屬性來實現您自己的簡單列表元素。 (隨着未來版本中的元素繼承回來,您可能會擴展iron-list)。

不過,我目前看到的最好的做法是使用一個計算的屬性:

<template> 
    <iron-list items="[[filterItems(items)]]" as="item"> 
    ... 
    </iron-list> 
</template> 

<script> 
Polymer({ 
    ... 
    filterItems: function (items) { 
    return items.filter(function (item) { // Array.prototype.filter 
     return item.priority > 8; // Filter condition 
    }); 
    } 
}); 
</script> 
+0

假設如果我有一個搜索欄,並在搜索輸入中鍵入字母,那麼我需要過濾?我應該添加一個觀察者'filterItems'來搜索輸入屬性? –

+0

有人可以詳細說明這個解決方案嗎? –

+0

webcomponents.org中有搜索組件用於搜索。你可能也想看看那些。但對我來說,您似乎可以使用觀察者而不是計算屬性,只需在輸入發生變化時在其中設置項目即可。此外,搜索欄很可能有一個輸入,您可能可以使用輸入的on-change事件並在那裏執行您的工作 – TheeBen