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!