How to sideload ember hasMany and belongsTo Relationship?

6
votes

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?

3
ember.jsember-data
can you show the App.Admission model above? also what does the json look like for both the admission and the visit models if you manually hit your REST endpoints? – Toran Billups
@ToranBillups have updated the question – Swapnil
Hi Toran, I have updated the question ... I just want a proper example of sideloading the relationship in ember-data – Swapnil

3 Answers

4
votes

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?

4
votes

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

I had the same problem but set up a bit different. visits were unaware of their person (i.e. couldn't do visit.get('person.name')). I had to add a serializer for visit:

export default AppSerializer.extend({
  attrs: {
    person: 'personId'
  },
});

My payload looks like this:

{
  person: {
    id: 1,
    name: 'John',
    visitIds: [1, 2, 3]
  },

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

person model:

export default DS.Model.extend({
  name: DS.attr('string'),
  visits: DS.hasMany('visit')
});

visit model:

export default DS.Model.extend({
  person: DS.belongsTo('person')
});