How to Load Multiple Unrelated Models in a Single EmberJS Route?

EmberJS: Loading Multiple Unrelated Models in a Single Route

When constructing an EmberJS application, one may encounter the need to load multiple models of unrelated data into a single route. This question delves into the appropriate approaches for such a task.

Considerations

Before embarking on the loading process, it's crucial to determine whether returning multiple models in the model hook is justifiable. A scenario where this approach is heavily discouraged is when a route loads dynamic data based on a URL slug (e.g., this.resource('foo', {path: ':id'})). If you attempt to load multiple models under such conditions, potential issues arise when linking to the route. Ember will bypass the model hook and use the model supplied during linking, resulting in inconsistent behavior since you anticipated retrieving multiple models but received only one.

Alternatives to Model Hook Loading

When loading multiple models in a route where the model hook approach is unsuitable, consider the following alternatives:

In setupController/afterModel Hook: Load the additional models in the setupController or afterModel hook. This approach allows you to hook up the results to your controller manually if needed. However, note that for this to work, you must return a promise from the afterModel hook when it needs to block the transition like the model hook does.

App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return $.getJSON('/books/' + params.id);
  },
  setupController: function(controller, model) {
    // Load additional model and set it on the controller
    controller.set('model2', { bird: 'is the word' });
  }
});

In Route's Model Hook: If multiple unrelated models need to be loaded and the route does not load dynamic data, the model hook can be utilized.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      model1: ['red', 'yellow', 'blue'],
      model2: ['green', 'purple', 'white']
    };
  }
});

Using Promises: When loading models involves asynchronous requests (e.g., server calls), employ promises to resolve these operations and return the resulting models in the model hook.

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      model1: promise1,
      model2: promise2
    });
  }
});

The above is the detailed content of How to Load Multiple Unrelated Models in a Single EmberJS Route?. For more information, please follow other related articles on the PHP Chinese website!