Ember view doesn't update after ArrayController is sorted - ember.js

Question

I have an Ember Array Controller that is binded to Ember select view that gets sorted by the user if they choose to. Once everything runs through my sort and I reset the array with the now sorted array the view doesn't change but if I loop through the array that I just set, it shows that it is sorted. So the view isn't updating with the array controller, I believe. I was looking at other posts with similar problems but none of the solutions from them worked for me.
dmp: Ember.ArrayController.create(),
tempArray: new Array(),
sort: function() {
debugger;
var self = this;
var textA, textB, i, t, pos, temp;
this.set('tempArray', self.dmp.get('content'));
var nxt;
for(t = 0; t < (self.get('tempArray').length) - 1; t++) {
nxt = this.get('tempArray')[t];
for(i = t; i < self.get('tempArray').length; i++) {
if(self.get('tempArray')[i].name.toUpperCase() <= nxt.name.toUpperCase()) {
nxt = self.get('tempArray')[i];
pos = i;
}
}
temp = self.get('tempArray')[t];
self.get('tempArray')[t] = nxt;
self.get('tempArray')[pos] = temp;
}
//App.defRouteSearch.dmpName.set('content', self.get('tempArray'));
//App.defRouteSearch.dmp.set('content', self.get('tempArray'));
self.setArray();
},
setArray: function() {
debugger;
var a = 0, b = 1;
var self = this;
while(a < this.get('tempArray').length) {
self.get('dmp').toArray[b] = self.get('tempArray')[a];
a++;
b++;
}
}
I switch everything over to a normal js array because it's quicker to manipulate data than compared to the Array Controller, I do this throughout the rest of my code when filling the 6 other arrays I have so that's not causing any problems. The commented code was what I was doing before to set the array.
Thanks for any help.

Answer 1

No need to do all of this. This should do the trick:
App.MyArrayController = Ember.ArrayController.create({
content: songs,
sortProperties: ['name'],
sortAscending: true
});

Answer 2

I was able to get it to work after a while. Here's my sort now
sortName: function() {
var self = this;
var i, t, pos, temp;
this.set('tempArray', new Array());
this.set('tempArray', self.dmp.get('content'));
var nxt;
for(t = 0; t < (self.get('tempArray').length) - 1; t++) {
nxt = this.get('tempArray')[t];
for(i = t; i < self.get('tempArray').length; i++) {
if(self.get('tempArray')[i].name.toUpperCase() <= nxt.name.toUpperCase()) {
nxt = self.get('tempArray')[i];
pos = i;
}
}
temp = self.get('tempArray')[t];
self.get('tempArray')[t] = nxt;
self.get('tempArray')[pos] = temp;
}
self.dmp.set('content', self.tempArray.clone());
},
Array.prototype.clone = function () {
var newObj = [];
for (i in this) {
if (this[i]) {
if ($.isPlainObject(this[i])) {
newObj[i] = $.extend(true, {}, this[i]);
}
else if ($.isArray(this[i])) {
this[i].clone();
}
else {
newObj[i] = this[i];
}
}
}
return newObj;
};
I'm not entirely sure why it works but it does. The small bit of reasoning I was able to come up with is that in js when you copy an array it's only referenced and not actually copied. But then I shouldn't need the clone() at the end since the referenced array was modified. Feel free to correct me if I'm wrong.