Ember.js: Accessing related model properties - ember.js

Question

I can't figure out how to output properties from related models into views. Models are defined like this:
Club Model
App.Club = DS.Model.extend({
name: DS.attr('string'),
slug: DS.attr('string'),
... // Rest of omitted attributes
province: DS.belongsTo('App.Province'),
city: DS.belongsTo('App.City'),
servicetable: DS.belongsTo('App.Servicetable'),
timetable: DS.belongsTo('App.Timetable'),
pricetable: DS.belongsTo('App.Pricetable')
});
Servicetable Model, which belongs to Club
App.Servicetable = DS.Model.extend({
labels: {
parking: 'Parking',
bikeParking: 'Aparcamiento para bicicletas',
shower: 'Duchas',
materialRenting: 'Alquiler de Material',
restaurantCoffeeshop: 'Restaurante/Cafetería',
shop: 'Tienda',
playschool: 'Guardería',
locker: 'Taquillas',
handicapped: 'Acceso minusválidos',
sauna: 'Sauna',
wifi: 'WiFi'
},
parking: DS.attr('boolean'),
bikeParking: DS.attr('boolean'),
shower: DS.attr('boolean'),
materialRenting: DS.attr('boolean'),
restaurantCoffeeshop: DS.attr('boolean'),
shop: DS.attr('boolean'),
playschool: DS.attr('boolean'),
locker: DS.attr('boolean'),
handicapped: DS.attr('boolean'),
sauna: DS.attr('boolean'),
wifi: DS.attr('boolean'),
club: DS.belongsTo('App.Club')
});
Now, the output for api/clubs/2 is the following. Note that servicetable is being sideloaded to reduce number of requests:
{
"club": {
"id": "2",
"name": "Club de P\u00e1del y Tenis Fuencarral",
"slug": "club-de-padel-y-tenis-fuencarral",
... // Rest of omitted attributes
},
"servicetable": {
"id": "2",
"club_id": "2",
"parking": "1",
"bike_parking": "0",
"shower": "1",
"material_renting": "1",
"restaurant_coffeeshop": "1",
"shop": "1",
"playschool": "0",
"locker": "0",
"handicapped": "0",
"sauna": "0",
"wifi": "0"
}
}
Finally, route and template:
App.ClubGeneralInfoRoute = Em.Route.extend({
setupController: function(controller) {
controller.set('content', App.Club.find(App.clubId));
}
});
<script type="text/x-handlebars" data-template-name="club/general-info">
<h1>Club Info</h1>
<label>Parking</label>
{{view Ember.Checkbox checkedBinding="content.servicetable.parking"}}
</script>
So when I load the page, I can see the template rendering as the <h1> is appearing, but the properties of Servicetable not.
Note that if I try to render direct Club attributes like name or slug in this template, they are working too.
Any suggestions?

Answer 1

If you're sideloading, you need to configure your adapter to do so.
DS.RESTAdapter.configure('App.Servicetable', {
sideloadAs: 'servicetables'
});
Next, you need to include the servicetable id in the club's json:
"club": {
"id": "2",
"servicetable_id": 2,
... // Rest of attributes
}
When you side load records, pass them as an array, and set the key in plural form:
"servicetables": [{
"id": "2",
... // Rest of attributes
}]
Finally, the complete json response should look like this:
{
"club": {
"id": "2",
"servicetable_id": 2,
"name": "Club de P\u00e1del y Tenis Fuencarral",
"slug": "club-de-padel-y-tenis-fuencarral",
... // Rest of attributes
},
"servicetables": [{
"id": "2",
"club_id": "2",
"parking": "1",
... // Rest of attributes
}]
}