Polymer 1.0：排序 dom-repeat答案

【问题标题】：Polymer 1.0: Sorting dom-repeatPolymer 1.0：排序 dom-repeat
【发布时间】：2015-11-27 09:15:49
【问题描述】：

How do I sort the data in this jsBin by item.order。 (Documentation)

http://jsbin.com/zoqaqivaba/edit?html,output

<html>

<head>
  <title>My Element</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>

  <firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs"
                       data="{{items}}"></firebase-collection>
    <paper-input label="Search"
                 value="{{searchString::input}}"></paper-input>
    <div>[[searchString]]</div>
    <div>[[sortby]]</div>
        <paper-dropdown-menu label="Sort by">
            <paper-menu class="dropdown-content"
                        selected="{{sortby}}"
                        attr-for-selected="data-sortby">
                <paper-item data-sortby="none" >None </paper-item>
                <paper-item data-sortby="order">Order</paper-item>
            </paper-menu>
        </paper-dropdown-menu>
    <template is="dom-repeat" items="{{items}}" as="item"
        filter="{{computeFilter(searchString)}}"
        sort="{{computeSort(sortby)}}">
        <div>[[item.__firebaseKey__]], [[item.order]]</div>
    </template>
  </template>

  <script>
    Polymer({
      is: "my-element",
      computeFilter: function(string) {
        if (!string) {
          // set filter to null to disable filtering
          return null;
        } else {
          // return a filter function for the current search string
          string = string.toLowerCase();
          return function(item) {
            var name = item.__firebaseKey__.toLowerCase();
            var order = item.order.toLowerCase();
            return (name.indexOf(string) != -1 ||
                   order.indexOf(string) != -1);
          };
        }
      },
      computeSort: function(string) {
/*      What function goes here? To sort by 'item.order' in reverse.
          function(a, b) {
            return b[string] - a[string];
          }
*/        
      },
      properties: {
        items: {
          type: Array
        }
      }
    });
  </script> 
</dom-module>

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

</html>

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

您的排序未绑定到属性，因此它不需要花括号 {}。

您需要将排序函数格式化为一个函数形式，该函数接受两个参数（每个值一个用于排序）并根据以下规则返回 -1、1 或 0：

如果 compareFunction(a, b) 小于 0，则将 a 排序到比 b 低的索引，即 a 排在第一位。
如果 compareFunction(a, b) 返回 0，则 a 和 b 彼此保持不变，但对所有不同元素进行排序。注意：ECMAscript 标准不保证这种行为，因此并非所有浏览器（例如，至少可以追溯到 2003 年的 Mozilla 版本）都尊重这一点。
如果 compareFunction(a, b) 大于 0，则将 b 排序到比 a 低的索引。

更多信息请参见Array.prototype.sort()

http://jsbin.com/zaxogonuxa/edit?html,output

<template>

  <firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}"></firebase-collection>
  <paper-input label="Search" value="{{searchString::input}}"></paper-input>
  <div>[[searchString]]</div>
  <div>[[sortby]]</div>
  <paper-dropdown-menu label="Sort by">
    <paper-menu class="dropdown-content" selected="{{sortby}}" attr-for-selected="data-sortby">
      <paper-item data-sortby="none">None </paper-item>
      <paper-item data-sortby="order">Order</paper-item>
    </paper-menu>
  </paper-dropdown-menu>
  <template is="dom-repeat" items="{{items}}" as="item" filter="{{computeFilter(searchString)}}" sort="_computeSort">
    <div>[[item.__firebaseKey__]], [[item.order]]</div>
  </template>
</template>

<script>
  Polymer({
    is: "my-element",
    computeFilter: function(string) {
      if (!string) {
        // set filter to null to disable filtering
        return null;
      } else {
        // return a filter function for the current search string
        string = string.toLowerCase();
        return function(item) {
          var name = item.__firebaseKey__.toLowerCase();
          var order = item.order.toLowerCase();
          return (name.indexOf(string) != -1 ||
            order.indexOf(string) != -1);
        };
      }
    },
    _computeSort: function(a, b) {
      if (a.__firebaseKey__ == b.__firebaseKey__) {
        return 0;
      }
      return a.__firebaseKey__ > b.__firebaseKey__ ? -1 : 1;
    },
    properties: {
      items: {
        type: Array
      }
    }
  });
</script>

【讨论】：

你救了我的命。 Firebase 和聚合物需要更多文档，其中包含此类具体示例。