ember - rendering model hasMany attribute

Question

Hello and thanks for taking the time to help me with my question.

I am having difficulties rendering an attribute of a model using handlebars. Here is the code:

App.Project = DS.Model.extend({
    name: DS.attr('string'),
    teams: DS.hasMany('team', {async: true})
    // teamEffort: DS.attr('array')
});

App.Team = DS.Model.extend({
    name: DS.attr('string'),
    project: DS.belongsTo('project')
});

App.Team.FIXTURES = [
    {
        id: 1,
        name: 'Team 1',
        project: 1
    },
    {
        id: 2,
        name: 'Team 1',
        project: 2
    },
...]

App.Project.FIXTURES = [
    {
        id: 1,
        name: 'Project 1 - Test',
        teams: ['1', '3']      
    },
    {
        id: 2,
        name: 'Project 2 - Test',
        teams: ['2', '4', '5']
    }
...
];

and have the following html:

...
<script type="text/x-handlebars" data-template-name="projects">
        <!-- TODO: add css classes -->
        Test
        {{#each project in model}}
            {{#each team in project.teams}}
                aaaaaaa
            {{/each}}
        {{/each}}
        <table class="table table-bordered">
            <thead>
                <th colspan="4">Project Name</th>
            </thead>
            <tbody>
                {{#each project in model}}
                    <tr>
                        {{#each team in project.teams}}
                            aaaa
                        {{/each}}
                        <td colspan="4">{{project.name}}</td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </script>
...

application.js:

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter;

App.Router.map(function(){
    this.resource('projects', {path: '/'});
});

router.js:

App.ProjectsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('project');
    }
});

When debugging using the Ember Chrome plugin I can see that the projects are associated with 2 and 3 teams accordingly, which is correct, however, when I run {{ log project.teams.length }} I always get 0. I suspect it has got something to do with the fact that I have added the attribute async:true in the model above, however, without it my code would not run.

project.name prints out as expected. I cannot get a reference to the nested relation teams.

I have been banging my head against this for 3 and a half hours now. Any help would be appreciated!

Thanks so much!

The log only runs while rendering the first time, so it's likely to always be 0 each time, have you tried doing the each without the table structure? (or putting the team one in the tr?) — Kingpin2k
Yes I have.. I have tried almost everything there is to do.. Still I keep getting: "Uncaught TypeError: Cannot read property 'firstChild' of null" :/ — Dragan
@kingpin2k, I've updated the html with your recommendation, no effect — Dragan
What about adding async: true to DS.belongsTo('project')? — claptimes
@claptimes, tried that aswell. I keep getting the same error! :/ — Dragan

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-23T15:54:00

The fixture adapter doesn't coerce ids, make sure your id types match (aka "1" != 1) (the rest adapter does coerce).

http://emberjs.jsbin.com/OxIDiVU/78/edit

ember - rendering model hasMany attribute

1 Answers