Polymer 聚合物1.0：排序dom重复_Polymer_Polymer 1.0

Polymer 聚合物1.0：排序dom重复

polymer

Polymer 聚合物1.0：排序dom重复,polymer,polymer-1.0,Polymer,Polymer 1.0,。（）我的元素 [[searchString]] [[sortby]] 没有一个命令 [[item.\uuuu firebaseKey][uuuuu]，[[item.order]] 聚合物({ 是：“我的元素”， computeFilter:函数（字符串）{ 如果（！字符串）{ //将筛选器设置为null以禁用筛选返回null； }否则{ //返回当前搜索字符串的筛选函数 string=string.toLowerCase（）；返回函数（项目）{ var name=item.\uuu

。（）


我的元素
[[searchString]]
[[sortby]]
没有一个
命令
[[item.\uuuu firebaseKey][uuuuu]，[[item.order]]
聚合物({
是：“我的元素”，
computeFilter:函数（字符串）{
如果（！字符串）{
//将筛选器设置为null以禁用筛选
返回null；
}否则{
//返回当前搜索字符串的筛选函数
string=string.toLowerCase（）；
返回函数（项目）{
var name=item.\uuuu firebaseKey\uuuuu.toLowerCase（）；
var order=item.order.toLowerCase（）；
return（name.indexOf（string）！=-1||
order.indexOf（字符串）！=-1）；
};
}
},
computeSort:函数（字符串）{
/*这里有什么功能？按“item.order”反向排序。
功能（a、b）{
返回b[string]-a[string]；
}
*/        
},
特性：{
项目：{
类型：数组
}
}
});

您的排序未绑定到属性，因此它不需要大括号

{}

您需要将排序函数的格式设置为一个函数，该函数接受两个参数（每个值对应一个参数进行排序），并根据以下规则返回-1、1或0：

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

有关更多信息，请参阅


[[searchString]]
[[sortby]]
没有一个
命令
[[item.\uuuu firebaseKey][uuuuu]，[[item.order]]
聚合物({
是：“我的元素”，
computeFilter:函数（字符串）{
如果（！字符串）{
//将筛选器设置为null以禁用筛选
返回null；
}否则{
//返回当前搜索字符串的筛选函数
string=string.toLowerCase（）；
返回函数（项目）{
var name=item.\uuuu firebaseKey\uuuuu.toLowerCase（）；
var order=item.order.toLowerCase（）；
return（name.indexOf（string）！=-1||
order.indexOf（字符串）！=-1）；
};
}
},
_计算排序：函数（a，b）{
如果（a.uuu firebaseKey_uuu==b.uuu firebaseKey_uuu）{
返回0；
}
返回a.。\uuuu firebaseKey\uuuu>b.\uuuu firebaseKey\uuuuu？-1:1；
},
特性：{
项目：{
类型：数组
}
}
});

你救了我的命。Firebase和polymer需要更多的文档和这样的具体示例。

<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>

<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>