Polymer 1.x：dom-repeat 中使用的排序示例

Question

请显示代码（最好是功能正常的 JSbin）演示如何在 dom-repeat 元素中正确使用 sort 属性。 See documentation.

https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists

<template is="dom-repeat" sort="_sortItems">
...
</template>
...
_sortItems: function() {
  // What function goes here?       
}

此外，了解有关我如何尝试使用它的更多详细信息。

Answer 1

Example with Plunker

<dom-module id="my-element">
    <template>
      <template is="dom-repeat" items={{numbers}} sort="_mySort">
        <div>[[item.num]]</div>
      </template>
    </template>
    <script>
      Polymer({
        is: "my-element",
        ready: function() {
          this.numbers = [{
            num: 1
          }, {
            num: 3
          }, {
            num: 2
          }, ];
        },
        _mySort: function(item1, item2) {
          return item1.num > item2.num;
        }
      });
    </script>
  </dom-module>

Answer 2

通过使用标准排序函数符号（即 a、b 变量和 - 减法运算符而不是不等式（例如 < 和>).

Plunker

http://plnkr.co/edit/f58W9AXJIXsHRUh3liY5?p=preview

<html>

<head>
  <title>Sort</title>

  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
  <base href="http://element-party.xyz/" />
  <link rel="import" href="all-elements.html" />
</head>

<body>
  <dom-module id="my-element">
    <template>
      <template is="dom-repeat" items={{numbers}} sort="_mySort">
        <div>[[item.num]]</div>
      </template>
    </template>
    <script>
      Polymer({
        is: "my-element",
        ready: function() {
          this.numbers = [{
            num: 1
          }, {
            num: 3
          }, {
            num: 2
          }, ];
        },
        _mySort: function(a, b) {
          return b.num - a.num;
        }
      });
    </script>
  </dom-module>

  <my-element></my-element>
</body>

</html>

Polymer 1.x：dom-repeat 中使用的排序示例

Polymer 1.x: Example of sort used in dom-repeat

sorting

polymer

polymer-1.0