ember.js - Lazy loading leads to undefined data in Ember -

i'm using ember.js week , ran problem concerning ember-data , ember.js. have simple 1:n-relationship on model called user. user hasmany slots defined start_time , end_time.

in component called slots-per-day slots of given user rendered filtered day following js code:

  /* ... rest of component.js of slots-per-day ... */   filteredslots: ember.computed('user', function() {     let time = moment();     return this.get('user.slots').filter( (slot) => {       let left = moment(time).startof('day');       let right = moment(time).endof('day');       let start_time = moment(slot.get('start_time'));       let end_time = moment(slot.get('end_time'));       console.debug(slot.get('start_time'));        return start_time.isbetween(left, right) || end_time.isbetween(left, right);     });   })   /* ... rest of component.js of slots-per-day ... */ 

there several problems faced different approaches:

1. using code above filteredslots-property evaluated once. underlying storage in undefined state, since console.debug outputs undefined amount of slots right. guess ember-data has loaded array slots, forget load rest of data. if transition same route data displayed , console.debug returns different moment.js-dates.

2. if add user.slots dependency list of property, evaluated twice. both evaluations lead same debug output in (1): undefined.

3. if add user.slots.@each.start_time, property evaluated amount of components on page times amount of slots (which slow). despite fact, slow, works , renders data correctly.

so question is: how preload data in ember-data, before components rendered?

edit:

i tried promises:

  /* slotroute ... */       setupcontroller(controller, model){     this._super(controller, model);     controller.set('time', this.get('time'));     controller.set('users', model.users);     controller.set('timescope', this.get('timescope'));   },    users: ember.computed('time', function() {     return this.store.query('user', {       slots: {         time: this.get('time').tostring(),         timescope: this.get('timescope')       }     });   }),    model(params) {     return ember.rsvp.hash({       users: this.get('users'),       slots: this.store.get('slots')     });   },   /* ... */ 

no change in positions (1), (2) , (3) of list above.

number 3 correct way write computed property, async relationship. have pay price somewhere, if want pay during transition can use aftermodel assuming fetching user using model hook. can use aftermodel/beforemodel of particular route if it's loaded somewhere else.

the route

model(params){   return this.store.find('user', 1); }, aftermodel(model, transition){   return model.get('slots'); } 

the route using service

aftermodel(model, transition){   return this.get('someservice.user.slots'); }