聚合物中转发器的字母排序

Question

在角度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>

我得到一个空数组传递给元素原型中的sort函数(链接数组中肯定有对象).

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

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

这是接近这个的正确方法还是超过我的睡觉时间？!

提前致谢

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实现.