聚合物1.0:排序dom-repeat [英] Polymer 1.0: Sorting dom-repeat
本文介绍了聚合物1.0:排序dom-repeat的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
item.order 排序此jsBin中的数据.
(文档)
How do I sort the data in this jsBin by item.order.
(Documentation)
<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>
推荐答案
您的排序未绑定到属性，因此不需要花括号{}.
Your sort is not binding to a property so it doesn't need the curly braces {}.
您需要以以下形式格式化排序函数:该函数需要两个参数(每个要排序的值一个)，并根据以下规则返回-1、1或0:
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:
- 如果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() 了解更多信息
<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>
这篇关于聚合物1.0:排序dom-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
