Polymer 1.0: Sorting dom-repeat

2019-07-18 09:38发布

站内问答 / 移动开发
931 1 4

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条回答
一夜七次
2楼-- · 2019-07-18 10:02

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)