Ember.js CollectionView order

Question

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 CollectionView with it's content property bound to the sorted property, but it's not rendering them in the correct order. demo

I've obviously made the false assumption that order is maintained between the content and childViews property. What is the correct way to do this?

Handlebars:

<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")

});

​

Answer 1

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([
        ...
    ])

});