Ember.js binding on array inside a property

Question

Hello emberjs experts :)

There is something that i don't understand.

Given the following route:

Evibe.MemberShowRoute = Ember.Route.extend({
    model: function(params) {
        return Ember.$.getJSON('/api/user').then(function(user) {
            return Ember.Object.create(user);
        });
    }
});

The call to the api simply returns a user object containing properties. One of this property is an array of picture objects. Like that:

{
    username: "A nice user",
    pictures: [
        {id: 1, is_main: true,  url: 'http://www.test.com/img1.jpg'},
        {id: 2, is_main: false, url: 'http://www.test.com/img2.jpg'},
        {id: 3, is_main: false, url: 'http://www.test.com/img3.jpg'},
        {id: 4, is_main: false, url: 'http://www.test.com/img4.jpg'},
    ]
}

In my controller, i have something like this:

Evibe.MemberShowController = Ember.ObjectController.extend({
    nb_pictures: function() {
        return this.pictures.length;
    }.property('pictures'),

    addPictureObject: function(picture) {
        this.get('pictures').addObject(picture);
    }
});

And in my template, i have something like this:

{{ nb_pictures }} pictures

I don't understand why nb_pictures is not updated, as i'm adding an object into my "pictures" property with the addPictureObject function.

Also, when i try to do something like this:

this.get('pictures').setEach('is_main', false);                   // Works
this.get('pictures').findBy('id', pictureId).is_main = true;      // Doesn't work
this.get('pictures').findBy('id', pictureId).set('is_main', true) // Doesn't work

The first line works as expected.

But... for the second line, i get the error: "Assertion failed: You must use Ember.set() to access this property (of [object Object])"

And for the third one, i get the error: "Uncaught TypeError: Object # has no method 'set' "

Any ideas that can help clarify this would be greatly appreciated.

Marcio Junior · Accepted Answer · 2013-10-22 16:13:29Z

1

In your nb_pictures computed property, you have set the dependent key with property('pictures'), the correct is property('pictures.length').

This is the updated code:

Evibe.MemberShowController = Ember.ObjectController.extend({
    nb_pictures: function() {
        return this.get('pictures.length');
    }.property('pictures.length'),

    addPictureObject: function(picture) {
        this.get('pictures').addObject(picture);
    }
});

Using just property('pictures') will make the framework observe just the array replacement, like set('pictures', [...]), not the changes in the array structure get('pictures').pushObject(...). this the reason that your ui don't update.

answered Oct 22, 2013 at 16:13

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vinc Over a year ago

Excellent ! The nb_pictures works as expected now :) Thanks You ! Any idea about my second problem about modify a property of an object in my array ?

Vinc Over a year ago

Just found the answer here: stackoverflow.com/questions/17976333/… Again, many thanks Marcio

Collectives™ on Stack Overflow

Ember.js binding on array inside a property

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related