我有一个ArrayController
定期更新的。它有一个sorted
计算属性,可以让事情保持秩序。我正在尝试使用CollectionView
它的content
属性绑定到sorted
属性,但它没有以正确的顺序呈现它们。演示
我显然做出了错误的假设,即在content
andchildViews
属性之间保持顺序。这样做的正确方法是什么?
车把:
<script type="text/x-handlebars" data-template-name="item">
id {{view.content.id}}
</script>
<script type="text/x-handlebars">
<ul>
{{collection
contentBinding="App.itemController.sorted"
itemViewClass="App.ItemView"
}}
</ul>
</script>
JavaScript:
App = Ember.Application.create({
ready: function(){
// add a new object with a random id
// every second
setInterval(function(){
var id = Math.round(Math.random() * 100),
obj = Em.Object.create({ id: id });
App.itemController.pushObject(obj);
}, 1000);
}
});
// Collection Item View
App.ItemView = Em.View.extend({
tagName: "li",
templateName: "item"
});
App.itemController = Em.ArrayController.create({
// random order
content: Em.A([
Em.Object.create({ id: 5 }),
Em.Object.create({ id: 3 }),
Em.Object.create({ id: 10 }),
Em.Object.create({ id: 6 }),
Em.Object.create({ id: 1 }),
Em.Object.create({ id: 2 }),
Em.Object.create({ id: 100 }),
]),
// filtered content
sorted: function(){
return this.get('content').sort(function(a,b){
return a.get('id') - b.get('id');
});
}.property("@each")
});
</p>