Ember.ArrayProxy changes not triggering handlebars #each update

Question

I suspect there is a way to update an Ember.Array proxy that will trigger ember's notifications but what I can't figure out how.

I am overwriting the "content" property to update the array. The array does update but the view does not.

App.items = Ember.ArrayProxy.create({
    content: [
        Ember.Object.create({ name: 'Me', city: 'new york'}),
        Ember.Object.create({ name: 'You', city: 'boston'})
    ],

    sortByCity: function() { 
        this.set('content', this.get('content').sort(function(a,b) {
            return a.get('city') > b.get('city')
        }));   
    }
});

Here's a fiddle that demonstrates the problem http://jsfiddle.net/alexrothenberg/za4Ha/1/

Any help is appreciated. Thanks!

Answer 1

Fixed it: http://jsfiddle.net/MikeAski/za4Ha/2/ (I refactored your code a little, by introducing a CollectionView to render the items).

You should use replaceContent primitive to replace an ArrayProxy content and keep the bindings bound...