如何对Polymer 1.0中的铁清单排序? [英] How to sort an iron-list in Polymer 1.0?

问题描述

我正在寻找对铁清单中的数据进行排序(以及对添加到数据数组中的项目进行排序).

I am looking to sort data in an iron-list (and also sort items as they are added into the data array).

样本(未排序)json数据:

Sample (unsorted) json data:

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

我尝试使用indexAs属性对iron-list进行如下排序，但是 API 不清楚如何使用它:

I have tried using the indexAs property to sort an iron-list as follows but the API isn't clear how to use it:

<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>

推荐答案

我不确定是否有更多本机的 Polymer 方法，但是构建排序逻辑并不复杂你自己.

I'm not exactly sure if there's more native Polymer way to do this, but it's not too complex to build the sorting logic yourself.

这个想法是监听response事件，对服务中的数据进行排序，然后将iron-list的items绑定到sortedData.

The idea is to listen to the response event, sort the data from the service and then bind the items of the iron-list to the sortedData.

您将需要在iron-ajax中添加on-response="_onResponseReceived".然后，只需对返回的数据进行排序即可.

You will need to add on-response="_onResponseReceived" to your iron-ajax. And then it's just a matter of sorting the returned data.

_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]]" ...>

这篇关于如何对Polymer 1.0中的铁清单排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！