Ember.js: Accessing related model properties

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?

Teddy Zeenny Teddy Zeenny · Accepted Answer · 2013-02-25T16:08:27

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
    }]
}

Ember.js: Accessing related model properties

1 Answers