ember.js - How do you access the properties of a related EmberJS object in a template? -

i have defined these 2 objects in ember:

app.course = ds.model.extend({     name: ds.attr('string'),     students: ds.hasmany('app.student'),     coursecomponents: ds.hasmany('app.coursecomponent') });  app.coursecomponent = ds.model.extend({     course: ds.belongsto('app.course'),     component: ds.attr('string') }); 

i've created fixture data testing purposes , goal display list of courses. when course clicked, should display components make course below.

so far it's working (routes show correct id course, etc, etc) cannot access 'component' property in course's related coursecomponent objects. property can access 'id'.

how can configure can like:

{{#each component in coursecomponents}}     {{component.component}} {{/each}} 

it returns empty string. thing can output component's id with:

{{#each component in coursecomponents}}     {{component.id}} {{/each}} 

how can access related object properties in template?

edit:

jsfiddle code:

http://jsfiddle.net/3bgn4/256/

in end turned out using broken (i guess?) build of ember-data. never thought check since pulled emberjs site morning via starter kit.

outputting properties of related objects working i'd have expected.