Google的Polymer创作者声称我们可以手动排序<iron-list>
(也许可以解决此问题?)。
Per @emmanuel在Polymer Slack网站上:
您可以设置
list.items = newItems
,这将刷新列表。
这是我的代码。但这不起作用。请帮忙。
这部分代码似乎是问题所在。//this.$.list.items = this.items.sort(this._computeSort(val, ord));
//this.items = this.items.sort(this._computeSort(val, ord));
//this.items.sort(this._computeSort(val, ord));
//this.$.list.items = this.items.sort(this._computeSort(val, ord));
(我注释掉所有尝试失败的内容。)
<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>
<style>
h3 {
margin-bottom: 0px;
}
iron-list {
padding-bottom: 16px;
}
.item {
@apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}">
</firebase-collection>
<h3>Controls</h3>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content" selected="{{sortVal}}" attr-for-selected="data-sortby">
<paper-item data-sortby="order">Order</paper-item>
<paper-item data-sortby="height">Height</paper-item>
</paper-menu>
</paper-dropdown-menu>
<br>
<paper-toggle-button checked="{{reverse}}">Reverse</paper-toggle-button>
<br /><br />
<br><h3>Monitor Control Values</h3>
<div>Sort by: [[sortVal]]</div>
<div>Reverse: [[reverse]]</div>
<br><h3>Iron-List Output</h3>
<iron-list id="list" items="[[items]]" as="item">
<template>
<div class="item">
Name: [[item.__firebaseKey__]]<br />
Order: [[item.order]]<br />
Height: [[item.height]]
</div>
</template>
</iron-list>
</template>
<script>
(function() {
Polymer({
is: "my-element",
properties: {
items: {
type: Array,
},
sortVal: {
type: String,
value: 'order'
},
sortOrder: {
type: Number,
value: -1, // High to low
computed: '_computeSortOrder(reverse)'
}
},
observers: [
'sortChanged(sortVal, sortOrder)'
],
_computeSortOrder: function(bool) {
return bool ? 1 : -1;
},
sortChanged(val, ord) {
// Also tried what is commented out
//this.$.list.items = this.items.sort(this._computeSort(val, ord));
//this.items = this.items.sort(this._computeSort(val, ord));
//this.items.sort(this._computeSort(val, ord));
//this.$.list.items = this.items.sort(this._computeSort(val, ord));
console.log('ord: ' + ord); // All values logged
console.log('val: ' + val); // Logs are correct
console.log('items: ' + this.items); // See console log
},
_computeSort: function(val, ord) {
return function(a, b) {
if (a[val] === b[val]) {
return 0;
}
return (ord * (a[val] > b[val] ? 1 : -1));
};
}
});
})();
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
每个@ rob,Polymer Slack网站:(解决方法请致@arthur!)
http://jsbin.com/vizexodoyi/1/edit?html,输出这是排序的版本:http : //jsbin.com/mabadi/2/edit?html,输出
主要问题是,如果您更改数组的内容,Polymer不知道您已完成操作(它无法在数组内部看到)。因此,您需要创建数据的副本,对其进行排序,然后将其设置为新值
为firebaseItems和sortedItems设置一个单独的变量可能会有所帮助。这样一来,您最终不会意外写回Firebase
还要确保给铁表一个高度
高度:100%之类的。并确保其容器也具有高度
<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>
<style>
h3 {
margin-bottom: 0px;
}
iron-list {
padding-bottom: 16px;
height: 100%;
}
.item {
@apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}">
</firebase-collection>
<h3>Controls</h3>
<paper-dropdown-menu label="Sort by">
<paper-menu class="dropdown-content" selected="{{sortVal}}" attr-for-selected="data-sortby">
<paper-item data-sortby="order">Order</paper-item>
<paper-item data-sortby="height">Height</paper-item>
</paper-menu>
</paper-dropdown-menu>
<br>
<paper-toggle-button checked="{{reverse}}">Reverse</paper-toggle-button>
<br /><br />
<br><h3>Monitor Control Values</h3>
<div>Sort by: [[sortVal]]</div>
<div>Reverse: [[reverse]]</div>
<br><h3>Iron-List Output</h3>
<iron-list id="list" items="[[items]]" as="item">
<template>
<div class="item">
Name: [[item.__firebaseKey__]]<br />
Order: [[item.order]]<br />
Height: [[item.height]]
</div>
</template>
</iron-list>
</template>
<script>
(function() {
Polymer({
is: "my-element",
properties: {
items: {
type: Array,
},
sortVal: {
type: String,
value: 'order'
},
sortOrder: {
type: Number,
value: -1, // High to low
computed: '_computeSortOrder(reverse)'
}
},
observers: [
'sortChanged(sortVal, sortOrder)'
],
_computeSortOrder: function(bool) {
return bool ? 1 : -1;
},
sortChanged(val, ord) {
if (! this.items || this.items.length == 0) {
return;
}
var temp = Array.prototype.slice.call(this.items);
temp.sort(this._computeSort(val, ord));
this.items = temp;
//console.log('ord: ' + ord);
//console.log('val: ' + val);
//console.log('items: ' + this.items);
},
_computeSort: function(val, ord) {
return function(a, b) {
if (a[val] === b[val]) {
return 0;
}
return (ord * (a[val] > b[val] ? 1 : -1));
};
}
});
})();
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
对于那些感兴趣的人Array.prototype.slice.call(this.items)
,您可能想在这里研究这个SO问题以及不同解决方案的性能比较。
一种明显的性能改进可能是:
// Reference for below: https://stackoverflow.com/questions/3199588/fastest-way-to-convert-javascript-nodelist-to-array
//var temp = Array.prototype.slice.call(this.items);
var temp = [];
var i = this.items.length;
while(i--) {
//temp.unshift(this.items[i]);
temp[i] = this.items[i];
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句