Question

我希望在铁列表中对数据进行排序（并在将项目添加到数据数组中时对其进行排序）。

示例（未排序）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事件，对服务中的数据进行排序，然后将items的{{1}}绑定到iron-list。

您需要将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

Answer 2

使用Polymer 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);
},
...

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

2 个答案: