EmberJS sort Array Controller of Objects

Question

Trying to figure this concept out. If you console.log this.get("content") before and after the sort, everything seems like it worked, but when it displays to the screen it gets funky. I think the issue is with Handlebars. When it "sorts" it adds a duplicate fourth record and sticks it at the top. You can see the problem in action here:

http://jsfiddle.net/skinneejoe/Qpkz5/78/ (Click the 'Sort by Age' text a couple times to resort the records and you'll see the issues)

Am I doing something wrong, is there a better way, or is this a bug? If it's a bug is there a good workaround?

Here's the full code:

index.html

    <script type="text/x-handlebars">
    {{#view App.SortView}}Sort by Age{{/view}}<br/>

    {{#each App.userController}}
        {{#view App.RecordView contentBinding="this"}}
            {{content.name}} - {{content.age}}
        {{/view}}
    {{/each}}
    </script>

app.js

window.App = Ember.Application.create();

App.userController = Ember.ArrayController.create({
    content: [
        Ember.Object.create({ name:"Jeff", age:24 }),
        Ember.Object.create({ name:"Mark", age:32 }),
        Ember.Object.create({ name:"Jim", age:12 })
    ],
    sort:"desc",
    sortContent:function() {

        if (this.get("sort") == "desc") {
            this.set("sort", "asc");
        } else {
            this.set("sort","desc")
        }

        if (this.get("sort") == "asc") {
            var sortedContent = this.get("content").sort( function(a,b){
                return a.get("age") - b.get("age");
            })
        } else {
            var sortedContent = this.get("content").sort( function(a,b){
                return b.get("age") - a.get("age");
            })
        }

        this.set("content", []);
        this.set("content",sortedContent)
    }
})

App.RecordView = Ember.View.extend({})

App.SortView = Ember.View.extend({
    click: function() {
        App.userController.sortContent("poId")
    }
})

Answer 1

I'm not seeing this bug in Safari, Chrome or Firefox on OS X, so I assume it's a IE issue.

Sounds a lot like this reported Ember bug, which got fixed 11 days ago. Try upgrading to ember-latest and see if that fixes it.