聚合物中中继器的字母排序

Question

在angular Js中，你使用过滤器对重复器进行排序，如下所示:

<li ng-repeat="link.title for link in links | orderBy:'title'">

我正在试验聚合物，我想知道你可以使用聚合物过滤器做类似的事情(我想在标记中声明性地对数据进行排序，而不是直接在数据集上)。所以我一直在尝试沿着这条线的东西(我已经剥离了代码一点清晰):

<polymer-element name="image-links" attributes="axis data width">
<template>
    <core-ajax id="ajax"
               auto
               url="../data/{{data}}.json"
               on-core-response="{{linksLoaded}}"
               handleAs="json">
    </core-ajax>
    <ul>
        <template repeat="{{link in links | sort}}">
            <li>...</li>
        </template>
    </ul>
</template>
<script>
    Polymer('image-links', {
        links: [],
        linksLoaded: function () {
            this.links = this.$.ajax.response.data;
        },
        sort : function (a, b) {
            var titleA = a.title.toLowerCase(), titleB = b.title.toLowerCase();
            if (titleA < titleB)  return -1;
            if (titleA > titleB) return 1;
            return 0;
        }
    });
</script>

我得到一个空数组传递给元素原型中的排序函数(在links数组中肯定有对象)。

这里也是我使用的ajax调用的响应:

{
"data" : [
    {
        "name" : "github",
        "url" : "..."
    },
    {
        "name" : "linked",
        "url" : "..."
    },
    {
        "name" : "stack",
        "url" : "..."
    },
    {
        "name" : "gplus",
        "url" : "..."
    },
    {
        "name" : "twitter",
        "url" : "..."
    }
]
}

这是正确的方式来处理这件事吗?还是我早就该睡觉了?!

Thanks in advance

Answer 1

sort过滤器将接收links数组作为参数，因此您需要执行以下操作:

sort: function(items) {
  items.sort(function (a, b) {
    var titleA = a.title.toLowerCase(), titleB = b.title.toLowerCase();
    if (titleA < titleB)  return -1;
    if (titleA > titleB) return 1;
    return 0;
  });
  return items;
}

它很可能被空数组调用一次，因为links以这种方式开始，并且是异步填充的。

为了更接近Angular的结构，你可以这样写:

<template repeat="{{link in links | orderBy('title')}}">
...
orderBy: function(items, key) {
  var sorter = function (a, b) {
    var titleA = a[key].toLowerCase(), titleB = b[key].toLowerCase();
    if (titleA < titleB)  return -1;
    if (titleA > titleB) return 1;
    return 0;
  };
  items.sort(sorter);
}

有很多方法可以将sorter提取为可重用的形式，但最简单的解决方案是导入聚合过滤器，它将提供orderBy(以及许多其他过滤器)，这些过滤器应该与Angular的相同或相似。使用聚合物过滤器，语法与我在第二个示例中展示的相同，但是您可以完全省略orderBy实现。