Question

In EmberJS I want to create a model that has a field that is a collection of other models. I figured this would be an easy thing, but I can’t get it to work.

My current approach, as demonstrated in the JSFiddle below, is to create the two models (in this case Foo and Bar) and a collection model for Bars (BarCollection). Then I give the Foo a BarCollection as an attribute, and then try to add Bars to the collection. It doesn’t work. No errors are thrown, and the collection exists, but no elements are ever added to it.

http://jsfiddle.net/tbxhQ/1/

Answer 1

That’s because you haven’t initialized your concrete App.BarCollection instance with a content property. This is needed since Ember.ArrayProxy proxies to the content arrray. If you don’t specify one, the proxy doesn’t which array it shall use …

Another issue is that it’s a convention to name instances lowerCase and classes UpperCase. So it’s App.foo. Also, you should always access properties via get and set. This guarantees that bindings are resolved correctly.

The result looks like this, see http://jsfiddle.net/pangratz666/fpqTv/:

Handlebars:

<script type="text/x-handlebars">
    All the bars from {{App.foo.name}}:
    <ul>
        {{#each App.foo.bars }}
            <li>{{this.name}}</li>
        {{/each}}
    </ul>
</script>

​
JavaScript:

App = Ember.Application.create();
App.Bar = Ember.Object.extend();

App.BarCollection = Ember.ArrayProxy.extend();

App.foo = Ember.Object.create({
    name: 'Fred',
    bars: App.BarCollection.create({
        content: []
    })
});

App.getPath('foo.bars').pushObject(App.Bar.create({
    name: 'bob'
}));​

---

As a note: in your case there is no requirement to use an ArrayProxy for your bars property. A simple JavaScript array does the job as well. So this would be my final suggestion for your posted example, see http://jsfiddle.net/pangratz666/CHHXb/:

JavaScript:

App = Ember.Application.create();
App.Bar = Ember.Object.extend();

App.foo = Ember.Object.create({
    name: 'Fred',
    bars: [],
    addToBars: function(name) {
        this.get('bars').pushObject(App.Bar.create({
            name: name
        }));
    }
});

App.get('foo').addToBars('bob');​