0

I have a template that has drop down that I would like it to be pre-populated with data coming the API. I thought of setting a controller properties from the setupController hook the problem is the template seems to be rendered before the promise from the store.findAll() is resolve causing a bit of flicker. Is there a hook/pattern so everything is loaded before the template is rendered.?

jpoiri
  • 347
  • 1
  • 8

1 Answers1

1

You'll want to use Ember.RSVP.hash to load multiple models, and use them in setupController.

Something like this:

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      dropdowndata: this.store.findAll('model1'),
      otherdata: this.store.findAll('model2')
    });
  },
  setupController(controller, model){
    controller.set('dropdowndata', model.dropdowndata)
    controller.set('model', model.otherdata)
  }
});
TameBadger
  • 1,580
  • 11
  • 15
  • Wouldn't that cause an issue if there is a dynamic segment and the model is pass by a link-to then the drop down data not is not loaded – jpoiri May 11 '16 at 15:11
  • Yes, you can use the afterModel hook to block the route. http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route/20523407#20523407 – Kingpin2k May 11 '16 at 15:22