Sorting an array does not update the Dom - ember.js

Question

I can not make the following code work in my test app:
this.propertyWillChange('tableContent');
this.get('tableContent').sort(function (a, b) {
var nameA = a.artikel_name,
nameB = b.artikel_name;
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0 //default return value (no sorting)
});
this.propertyDidChange('tableContent');
The data gets sorted, but the dom is not updated.
The template looks like this:
<tbody>
{{#each NewApp.router.gridController.tableContent}}
{{#view NewApp.TableRow rowBinding="this"}}
<td style="width: 100px">{{view.row.product_no}}</td>
<td align="right" style="width: 100px">{{view.row.price}}</td>
<td>{{view.row.artikel_name}}</td>
{{/view}}
{{/each}}
</tbody>
I tried to reproduce this problem with a short jsfiddle snippet. But there it works. The only difference is, that I fetch the data using an ajax call (and some additional router setup).
selectionChanged: function () {
var that = this;
if (this.selection) {
$.getJSON("api/v1/lists/" + this.selection.id + "/prices", function (content) {
that.set('tableContent', content);
});
}
}.observes('selection')
The same code works if i copy the array and reassign the copied array.

Answer 1

Did you try to use the built-in SortableMixin ? If not, is this good for you ?
JavaScript:
App = Ember.Application.create();
App.activities = Ember.ArrayController.create({
content: [{name: 'sleeping'}, {name: 'eating pizza'},
{name: 'programming'}, {name: 'looking at lolcats'}],
sortProperties: ['name']
});
App.ActivityView = Ember.View.extend({
tagName: "li",
template: Ember.Handlebars.compile("{{content}}")
});
App.SortButton = Ember.View.extend({
tagName: "button",
template: Ember.Handlebars.compile("Sort"),
click: function() {
App.activities.toggleProperty('sortAscending');
}
});
jsfiddle: http://jsfiddle.net/Sly7/cd24n/#base