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

【问题标题】：How to sort an iron-list in Polymer 1.0?如何在 Polymer 1.0 中对铁列表进行排序？
【发布时间】：2015-08-14 12:07:18
【问题描述】：

我正在寻找对铁列表中的数据进行排序（并且还对添加到数据数组中的项目进行排序）。

样本（未排序的）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>

【问题讨论】：

index-as 习惯于您可以将索引变量绑定到更有意义的东西以在屏幕上打印索引。您可能希望使用一个函数来以排序形式返回您的数据。

标签： polymer polymer-1.0

【解决方案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]]" ...>

【讨论】：

如果你的数据源是<firebase-collection>而不是<iron-ajax>怎么办？对这种情况有什么想法吗？
@Mowzer，我没用过<firebase-collection>，但我猜肯定有类似response的事件？
没有。 <firebase-collection> 没有以通常的方式实现 ajax。这是一个数据绑定。它使用状态驱动的方法。（不像常规 ajax 那样由事件驱动）。您要么（准连续）“连接”要么不。有一个 disconnect() 方法，但我认为这对这个目的没有用。

【解决方案2】：

使用 Polymer 1.2.4，如果您想以动态方式对 iron-list 进行排序，您还可以在更新观察者中的 sortedItems 数组后利用 this.querySelector('iron-list').notifyResize(); 强制刷新。这是一个 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);
},
...

【讨论】：