Ember update an object in an array

Question

I have an ArrayController with a data:[] property and a template with an each loop.

When I do

this.data.push({object})

the data array is updated, but the view is not.

When I do

this.data.pushObject({object})

the data array is updated AND the view is updated too (hooray).

When I do

this.data[0] = {new object}

the data array is updated, but the view is not.

What is the equivalent of pushObject for this case?

I cannot find a "updateObject" method. There is the setObjects method, but it weirdly fails. Some objects are updated and some are not.

The objects are like:

{
    item: "item",
    array: [1, 2, 3, 4]
}

The item is always updated, and the array not always. I have nested each loops in the template; could it be a problem?

The template is like:

{{#each data}}

    {{item}}

    {{foo}}

    {{#each array}}
        {{this}}
    {{/each}}

{{/each}}

The way I edit is like (in the controller):

var itemToEdit = self.get('data')[0];
itemToEdit['array'] = [2, 3, 4, 5];

Globally speaking, the problem is that the view does not re-render. When I go to another route and then back to the current route, everything is properly rendered with all the updates I made.

** PROGRESS: When I do

self.get('data').setEach('foo', Math.random());

the foo property is properly set and updated in the view... Where on Earth is the "set" method for a property of an array element?

Marcio Junior Marcio Junior · Accepted Answer · 2013-12-18T11:59:41

Each of your objects is a plain JavaScript object. You need to change to Ember.Objects. Instead of

this.data.pushObject({ foo: 'bar' })

you need to use

this.data.pushObject(Ember.Object.create({ foo: 'bar' })).

The Ember.Object is neeeded, so you can use the set method, to update the views.

Ember update an object in an array

1 Answers