Polymer 1.0: Sorting dom-repeat

问题

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>

回答1:

Your sort is not binding to a property so it doesn't need the curly braces {}.

You need to format your sort function in the form of a function that takes two parameters (one for each value to sort on) and that returns -1, 1 or 0 based on the following rules:

If compareFunction(a, b) is less than 0, sort a to a lower index than b, i.e. a comes first.
If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
If compareFunction(a, b) is greater than 0, sort b to a lower index than a.

See Array.prototype.sort() for more information

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>

来源：https://stackoverflow.com/questions/33953938/polymer-1-0-sorting-dom-repeat

标签

polymer

polymer-1.0