How does EmberJS select template for a Route?

问题

I have these routes defined:

this.resource('projects', function() {
    this.resource('project', { path: ':project_id'}, function() {
        this.route('details');
        this.route('members');
    });     
});

What I thought was that by convention project.details route would look for "project/details" template. It does but strangely it does not get the correct model. See http://jsbin.com/ELaxigE/19/edit

Now instead of providing "project/details" template if I create "project" template then it works. See http://jsbin.com/ELaxigE/21/edit

I am confused what is happening. Can someone explain?

回答1:

Given a route. When the model hook ins't defined, and have a dynamic segment that ends with _id:

this.route('edit', { path: ':user_id' });

This will generate a route like this:

App.EditRoute = Ember.Route.extend({
  model: function(params) {
    return App.User.find(params.id);
  }
});

In your case the only dynamic segmented route is project, because the :project_id.

this.resource('project', { path: ':project_id'}, function() { ... });

So because details and members, are just normal routes, it doesn't have a model.

When you change the template project/details to project, the things work because:

You transition to project.details, first is transitioned to project route, since you have declared this.resource('project'...). And because it's a dynamic segmented route, the App.Project instance is returned, and the your template is rendered bound to this model.

After this, the child route project.details is transitioned, but this time, the template project.details not exist. So nothing is rendered.

I think that the solutions are the @alexspeller answer, or:

this.resource('project', function() {
    this.route('details', { path: 'details/:project_id' });
    this.route('members', { path: 'members/:project_id' });
});

I hope it helps.

回答2:

This has nothing to do with templates. You haven't defined the model for the ProjectDetails route. You can do so like this:

App.ProjectDetailsRoute = Em.Route.extend({
  model: function() {
    return this.modelFor('project');
  }
});

来源：https://stackoverflow.com/questions/18292439/how-does-emberjs-select-template-for-a-route

标签

ember.js

routes