Ember.js - Define ArrayProxy inside an Object

Question

I have a list of categories. Each category can have sub categories. This is the model I've created:

App.Category = Em.Object.extend({
    id: null,
    name: null,
    subCategories: Em.ArrayProxy.create({content: []})
});

The problem is, if I push a sub category into the subCategories array, it is pushed into every instance of App.Category

Take a look at this jsFiddle.

I don't understand why this is happening, and how should I rewrite this to work properly.

Code:

App.Category = Em.Object.extend({
    id: null,
    name: null,
    subCategories: Em.ArrayProxy.create({content: []})
});

App.categories = Em.ArrayController.create({
    content: [],

    // assumes list of categories is ordered by parent id
    loadCategories: function(cats) {
        for (var i=0, cat; i < cats.length; i++) {
            var parentID = cats[i].parentID;
            delete cats[i].parentID;
            cat = App.Category.create(cats[i]);

            if (parentID !== null) {
                var parent = this.findProperty('id', parentID);
                parent.get('subCategories').pushObject(cat);
            } else {
                this.pushObject(cat);
            }
        };
    }
});

pangratz · Accepted Answer · 2012-06-01 14:07:24Z

2

That's because the hash passed to extend defines the properties on the prototype of the objects that are instantiated by the class. Whereas create define the properties on the instantiated object. There is a very good blog post by Dan Gebhardt about Understanding Ember.js Object. You should check it out.

Your problem can be solved as follows, see http://jsfiddle.net/pangratz666/hXHqs/:

App.Category = Em.Object.extend({
    init: function() {
        this._super();
        this.set('subCategories', Em.ArrayProxy.create({
            content: []
        }));
    }
});

answered Jun 1, 2012 at 14:07

pangratz

16.2k7 gold badges52 silver badges75 bronze badges

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

Collectives™ on Stack Overflow

Ember.js - Define ArrayProxy inside an Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related