Using the model hook to load data dependent on another API call

Question

In an app I'm currently developing, I need to load some data before deciding what data to load next and display. My initial approach was to define a route with a dynamic section like this:

this.route( "chart", { path: "/chart/:type" } );

The idea would be to use type to download some metadata and then request the actual chart data based on the metadata. This is a bit awkward in Ember, at least to the extent of my knowledge, as it would require doing an AJAX request in a controller without using ember-data to wrap it.

As the chart will be displayed using the same code independently of the metadata and there are some interface elements that will be rendered based on that metadata, I thought it would be a good idea to use Ember's router to handle the calls doing something like:

this.route( "chart", { path: "/chart/" }, function () {
  this.route( "display-chart", { path: "/score/" } );
  this.route( "display-chart", { path: "/ranking/" } );
  this.route( "display-chart", { path: "/matches/" } );
} );

There is only a limited number of values for the dynamic segment so for each segment I will create a route handled by the same handler. The chart template will load the metadata and render the common UI elements, leaving the actual chart to the display-chart handler.

I have two questions:

Using the first approach, a route with a dynamic segment, is it possible to load the additional data (which depends on first downloading metadata) within the model hook? Something like RSVP but using previously downloaded data to download the next bit.
The second approach, using nested routes, is this the right way to do it? Can you think of any issues with this approach?

Igor Igor · Accepted Answer · 2016-06-13T09:37:31

You could chain promises in your model hook, i.e.

model() {
  return this.get('ajax').request(/*some url*/).then(data => {

    /* Now here you can use your requested data 
       to decide what to load in the store 
       and then just return that promise back, like this:  */

    return this.store.findAll('someModel');

    /* The result of the model hook 
       will be the result of the findAll method */
  })
}

Using the model hook to load data dependent on another API call

1 Answers