如何在Polymer 1.0中对铁名单进行排序？

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

样本（未排序）json数据：

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

我尝试使用

indexAs

属性对

铁名单进行如下排序，但不清楚如何使用它：

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


名称：[[item.Name]]
我不确定是否有更多的天然聚合物方法可以做到这一点，但自己构建排序逻辑并不太复杂

其思想是监听
响应
事件，对服务中的数据进行排序，然后将
铁名单
的
项
绑定到
分拣数据

您需要将
on response=“\u 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;
}

使用Polymer 1.2.4，如果您想以动态方式对
铁名单进行排序，您还可以利用
这个.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);
},
...


[[item.name]]
...
特性：{
...
排序单元：{
类型：字符串，
值：“id”
},
分拣员：{
类型：数字，
值：-1//降序
},
},
观察员：[
'sortingObserver（项目。*、sortByTerm、sortByOrder）'
],
sortingObserver：函数（项目、sortByTerm、sortByOrder）{
var sortedItems=[]，
validSortingOptions=['id'，'name']；
if（有效排序选项索引of（sortByTerm）！=-1）{
sortedItems=items.base.sort（this._computeSort（sortByTerm，sortByOrder））；
}否则{
sortedItems=items.base；
}
此.set（'sortedItems'，sortedItems）；
this.querySelector（'iron-list'）.notifyResize（）；
},
_computeSort:函数（属性、顺序）{
返回函数（a，b）{
如果（a[属性]==b[属性]）{
返回0；
}
返回（订单*（a[属性]>b[属性]？1:-1））；
};
},
_sortItems:功能（e）{
var sortByTerm=e.currentTarget.getAttribute（'sort-option'）；
this.set（'sortByTerm'，sortByTerm）；
},
...
索引作为
用于将索引变量绑定到更有意义的内容，以便在屏幕上打印索引。您可能希望使用一个函数，以排序形式返回数据。如果您的数据源是
而不是
，该怎么办？对这种情况有什么想法吗？@Mowzer，我没有使用
，但我想肯定有类似于
响应的事件？没有。
没有以通常的方式实现ajax。这是一个数据绑定。它使用状态驱动的方法。（不像常规ajax那样由事件驱动）。你要么（准连续）“连接”要么不连接。有一个
disconnect（）
方法，但我认为这对这个目的没有用处。
<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);
},
...