如何在 Polymer 1.0 中对铁列表进行排序？

Question

我希望对 iron-list 中的数据进行排序（以及对添加到数据数组中的项目进行排序）。

样本（未排序）json 数据：

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

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

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

Answer 1

我不确定是否有更多本机 Polymer 方法来执行此操作，但自己构建排序逻辑并不太复杂。

思路是监听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]]" ...>

Answer 2

使用 Polymer 1.2.4 如果您想以动态方式对 iron-list 进行排序，您还可以利用 this.querySelector('iron-list').notifyResize(); 在更新 sortedItems 数组后强制刷新在你的观察者中。这是一个 hack，但如果您不这样做，不幸的是聚合物不会为您刷新列表。让我们按 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);
},
...

如何在 Polymer 1.0 中对铁列表进行排序？

How to sort an iron-list in Polymer 1.0?

polymer

polymer-1.0