I have an ArrayController
which is periodically updated. It has a sorted
computed property which keeps things in order. I\'m trying to use a
Inspired by this answer: ember.js #each order by property
I use the sorting properties of ArrayController: https://github.com/emberjs/ember.js/blob/master/packages/ember-runtime/lib/mixins/sortable.js
I don't use CollectionView, but a simple #each, and call to addObject instead of pushObject
template
<script type="text/x-handlebars" data-template-name="item">
id {{view.content.id}}
</script>
<script type="text/x-handlebars" data-template-name="application">
<ul>
{{#each item in App.itemController}}
{{view App.ItemView contentBinding="item"}}
{{/each}}
<li>
</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 });
// should call addObject, because pushObject does not sort the inserted item
//App.itemController.pushObject(obj);
App.itemController.addObject(obj);
}, 1000);
}
});
// Collection Item View
App.ItemView = Em.View.extend({
tagName: "li",
templateName: "item"
});
App.itemController = Em.ArrayController.create({
sortProperties: ['id'],
// 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 }),
]),
});
App.ApplicationView = Ember.View.extend({
templateName: 'application'
});
App.ApplicationController = Ember.Controller.extend();
App.Router = Ember.Router.extend({root: Em.Route.extend()});
App.initialize();
The jsfiddle: http://jsfiddle.net/Sly7/LJAYk/
For the sake of completeness to @sly7_7's correct answer, here is a version with CollectionView
, see http://jsfiddle.net/pangratz666/ctPAA/.
Handlebars:
<script type="text/x-handlebars">
{{collection
tagName="ul"
contentBinding="App.itemController"
itemViewClass="App.ItemView" }}
</script>
JavaScript:
App.itemController = Em.ArrayController.create({
sortProperties: 'id'.w(),
// random order
content: Em.A([
...
])
});