聚合物1.0：分類dom-repeat

How do I sort the data in this jsBin by item.order。（Documentation）聚合物1.0：分類dom-repeat

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

<html> 

<head> 
    <title>My Element</title> 

    <script data-require="[email protected]*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script> 
    <script data-require="[email protected]*" 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>

來源

2015-11-27 Mowzer

你的排序是沒有約束力的屬性，因此它不需要花括號{}。

您需要採用兩個參數（每個價值排序）函數的形式來格式化您的排序功能，並且基於以下規則返回-1，1或0：

如果compareFunction（a，b）小於0，則將a排序爲比b更低的索引，即首先出現。
如果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>

來源

2015-11-27 10:40:54 MrK

你救了我的命。 Firebase和聚合物需要更多的文檔和具體的例子。 – dshukertjr

聚合物1.0：分類dom-repeat

回答

相關問題