Change content [] object property without removing or adding - model-view-controller

Question

I setup a list of objects, add them to content[] array list. So far so fine. Ember DOM in App.list show correct data. Now, when I start altering the content properties without remove/add/replaceAt() any object in App.list it seems Ember doesn't pick this up.
View:
{{#each item in App.list.content}}
{{item.title}}
{{/each}}
Code:
function myApp() {
App = Ember.Application.create({});
App.Item = Ember.Object.extend({
title: null,
parent: null
});
App.MyList = Ember.Object.extend({
title: null,
content: [],
changed: function() {
console.log('here');
}.observes('content')
});
App.list = App.MyList.create({
title: "foobar",
content: [
App.Item.create({
title: "item1"
}),
App.Item.create({
title: "item2"
})
]
});
console.log(App.list.content);
// Add 3rd object to list
App.list.get('content').pushObject(
App.Item.create({
title: "item3"
})
);
}
..and later in some random Ember ArrayController I do this:
for (var i = 0; i < 2; i++) {
App.list.content[i].title = "I CHANGED YOU";
}
Looking at my App.list the content is correct, but view is not. Am I missing something? If I have to guess ArrayHasChanged() seems to be rigged for array size changed or object being changed which I'm not doing, I'm altering property data within specific objects of the content[] array. Is it possible or do I have to removeAt()/Add/Delete objects?

Answer 1

You need you use get and set so the observers/bindings trigger with your changes.
// Bad
App.list.content[i].title = "blah";
// Good
App.get('list').objectAt(i).set('title', 'blah');
If this still does not work for you there might be something else missing. If you could post a jsfiddle that would help a lot!