javascript - 如何对 google-polymer 中的 dom-repeat 项目进行排序

Question

我在使用数据绑定(bind)时在 google-polymer 中遇到问题我需要对 polymer 中的 dom-repeat 项目进行排序。我需要编写一个排序函数，并将其用于我所有的 dom-repeats

我找不到方法。
这是我的排序功能:

 sort: function(a, b) {
          var nameA = a.name.toUpperCase();
          var nameB = b.name.toUpperCase(); 
          if (nameA < nameB) {
            return -1;
          }
          if (nameA > nameB) {
            return 1;
          }
          // names must be equal
          return 0;
        }

我该怎么做？

谢谢

Answer 1

您可以像这样使用排序属性:

<dom-module id="my-element">
  <template>
    <style>
    </style>
    <template is="dom-repeat" items="[[items]]" sort="sort">
      <div>{{item.name}} - {{item.age}}</div>
    </template>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({ 
        is: 'my-element',
        properties: {
          items: {
            type: Array,
            value: [
              {name: "Saman", age: 20},
              {name: "Mahdi", age: 20},
              {name: "Erlik", age: 48}
            ]
          }
        },
        sort: function(a, b) {
          var nameA = a.name.toUpperCase(); 
          var nameB = b.name.toUpperCase(); 
          if (nameA < nameB) {
            return -1;
          }
          if (nameA > nameB) {
            return 1;
          }

          // names must be equal
          return 0;
        }
      });
    });
  </script>
</dom-module>
<my-element></my-element>

引用。 https://www.polymer-project.org/2.0/docs/devguide/templates#filtering-and-sorting-lists