CODEWITHSUNDEEP
ember.js
bcmcfc
bcmcfc

Reputation: 26755

Computed property on an Ember object not working

I have an Ember object as follows:

App.Basket = Ember.Object.extend({

    items: [],

    numItems: function () {
        return this.items.length;
    }.property('items'),

    addItem: function (item) {
        this.items.push(item);
        window.console.log(this.items.length, this.get('items').length, this.numItems);
    }

});

App.userBasket = App.Basket.create({
    items: [{name: 'testing'}]
});

It's bound to in a template with:

{{App.userBasket.numItems}}

It shows the initial value correctly as set by populating the items array on create.

However, I have a button that calls App.userBasket.addItem({name: 'testing2'});.

In the console, the correct counts are returned. However, the view doesn't update. Why is this?

Upvotes: 0

Views: 1152

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

You need to add items.[] to your computed property dependencies. Otherwise it will just observe changes in the array assigment like basket.set('items', someItems), and you also want to observe changes in the array itself:

numItems: function () {
    return this.items.length;
}.property('items', 'items.[]'),

items.push is the native method from Array, ember add one called pushObject it behaves the same way like push, but notify the observes. And this is needed to numItems know about changes in the items property

addItem: function (item) {
    this.items.pushObject(item);
    window.console.log(this.items.length, this.get('items').length, this.numItems);
}

Upvotes: 4

Related Questions