How to sideload ember hasMany and belongsTo Relationship?

Question

I have a Person Model as follows

 App.Person= DS.Model.extend({
      id: DS.attr('string'),   
      name: DS.attr('string'),
      visits: DS.hasMany('App.Visit'),
      events: DS.hasMany('App.Event') ,
      allergies: DS.hasMany('App.Allergies'),
      get_allergies : function(){
    return this.get('allergies').getEach('allergy_name').reduce(function(accum, item) {
      return (accum.length > 0) ? (accum +', '+ item) : (item);
    }, '');
  }.property('[email protected]_name')    
    });


App.Visit = DS.Model.extend({
  visit_id: DS.attr('string'),
  date: DS.attr('date'),     
  admission: DS.belongsTo('App.Admission')
});

App.Admission = DS.Model.extend({
  loc: DS.attr('string'),
  admission_date: DS.attr('date'),
  care_team: DS.belongsTo('App.CareTeam')
});

As you can see Person hasMany "allergies", and along with person, allergies is also getting loaded for me because in the UI I am calling the get_allergies method while other hasMany relationships like "visits" and "events" are not getting loaded.

In UI {{person.get_allergies}}

I tried to sideload the relationships "visits" and "events"(using example on net), but that is not working? Can someone tell what is the proper way of sideloading ember-data because I couldnt find any proper documention with example on net except for few questions on stackoverflow itself?

Answer 1

According to the documentation, you should just add additional Visit and Event data in the response from the server.

{
  "person": {
    "id": 1,
    ...
    "event_ids": [5, 6, 7]
  },

  "events": [{
    "id": 5,
    ...
  },
  {
    "id": 6,
    ...
  },
  {
    "id": 7,
    ...
  }]
}

The main point here is that Events data should be outside of Person data.

Do you use the standard REST adapter? Could you please add a sample json returned by the server?

Answer 2

To sideload data in my app, I configure ember-data to know about the kinds of things I'll be sideloading. E.g. to sideload events and visits, do this:

DS.RESTAdapter.configure('App.Event', {
    sideloadsAs: 'events'
});

DS.RESTAdapter.configure('App.Visit', {
    sideloadsAs: 'visits'
});

App.Store = DS.Store.extend({
    revision: 11
});

and then in your json can look like this:

{
  "person": {
    "id": 1,
    "event_ids": [5, 6, 7],
    "visit_ids": [1, 2, 3]
  },

  "events": [
    { "id": 5 },
    { "id": 6 },
    { "id": 7 }
  ],

  "visits": [
    { "id": 1 },
    { "id": 2 },
    { "id": 3 }
  ]
}