CollectionView order
CollectionView example with ordering
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="item">
id {{view.content.id}} a
{{view.content.testing}}
</script>
<script type="text/x-handlebars" data-template-name="item_template">
{{view.content.title}}
</script>
<script type="text/x-handlebars">
{{! collection
contentBinding="App.itemController"
itemViewClass="App.ItemView" }}
{{collection contentBinding="App.itemController"
itemViewClass="App.ItemView"}}
{{collection App.CollectionViewTest}}
{{collection App.CollectView}}
</script>
JavaScript
App = Ember.Application.create({
ready: function(){
// add a new object with a random id
for(var it = 0;it<30;it++){
var id = Math.round(Math.random() * 100 * it),
obj = { id: id, testing:"asd" };
App.itemController.addObject(obj);
}
}
});
App.ItemController = Em.ArrayController.extend({
sortProperties:"id".w(),
// random order
content: Em.A([
{ id: 100 ,testing:"asd"},
{ id: 3 ,testing:"yes"}
])
});
App.itemController = App.ItemController.create();
// Collection Item View
App.ItemView = Em.View.extend({
tagName: "li",
templateName: "item"
});
App.CollectView = Em.CollectionView.extend({
contentBinding:"controller",
controller:App.itemController,
itemViewClass:App.ItemView
});
http://jsfiddle.net/tzLjLtp7/#fork
App.ItemViewA = Ember.View.extend({
templateName: 'item_template',
tagName: 'li'
});
App.CollectionViewTest = Ember.CollectionView.extend({
itemViewClass: App.ItemViewA,
content: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});