CODEWITHSUNDEEP
ember.jsember-data
Eike Cochu
Eike Cochu

Reputation: 3429

Ember: load models without waiting

Is it possible in Ember to load multiple models wihtout waiting for the promise to resolve and still use the afterModel hook? Currently, my code looks like this:

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      imports: this.store.findAll('import', {
        skip: 0,
        limit: 5
      }),

      latestimport: this.store.find('import', 'latest')
    });
  },

  afterModel(model) {
    ...some modifications here...
  }
}

due to the use of Ember.RSVP, the page load waits for all promises to resolve before it renders. Can I make the page render before the models are loaded? Can I then still use the afterModel hook? My point is, the data being loaded is just side information. I don't want the whole rendering process to be blocked because of that. I did not find any information in the documentation on that, although I get the feeling that the documentation is not complete at all.

Upvotes: 2

Views: 350

Answers (2)

Bek
Bek

Reputation: 3207

instead of wrapping your code with Ember.RSVP.hash just pass hash object as it is 

 model() {
    return {
      imports: this.store.findAll('import', {
        skip: 0,
        limit: 5
      }),

      latestimport: this.store.find('import', 'latest')
    })
  },

setupController(controller, model) {
  this._super(controller, model);
  // model.latestimport.then(...)
  // model.imports.then(...)
}

Upvotes: 1

Daniel
Daniel

Reputation: 18680

Please use following approach:

setupController(controller, model) {
  this._super(controller, model);

  Ember.RSVP.hash({
    imports: this.store.findAll('import', {
      skip: 0,
      limit: 5
    }),

    latestimport: this.store.find('import', 'latest')
  }).then(results => {
    // ...some modifications here...
    controller.set('model', results);
  });
}
  1. It shouldn't block rendering.
  2. You can still apply modifications to data.
  3. You can still access data in template as model.imports, model.latestimport.

Upvotes: 4

Related Questions