Ember.js - Index route vs. "top-level" resource route?

Question

When creating a "standard" crud resource in Ember.js, what is the difference between the index route and the "main" route?

For example, a users resource:

// app.router.js

Router.map(function() {
    this.resource('users', function() {
      this.route('new');
      this.route('show', { path: '/:user_id'});
      this.route('edit', { path: '/:user_id/edit'});
    });
});

Which route should contain the following "main" model hook?

// app/routes/users/index.js OR app/routes/users.js?

export default Ember.Route.extend({
    model: function() {
        return this.store.find('user');
    }
});

In other words, should I use the UsersRoute or the UsersIndexRoute? I find this very confusing. Any help is greatly appreciated.

Answer 1

You should put a model hook to UsersRoute route if a given model is required to render all of the nested routes, i.e. index, new, edit and show, as it will be invoked when entering any of these routes.

If the model is required only when rendering / route, an not /:user_id routes, then it should be loaded in UsersIndexRoute route.

See JsBin for an example of when model hooks nested routes are being triggered.

For your use-case, it could be either way - if you would like to have master-child type of UI where list of users is rendered also when editing/showing/adding user, you should load and render list of users in UsersRoute, and then just render additional content in the nested route; if instead you do not want to render list of user in nested routes, just load and render them in UsersIndexRoute.