Multiple nested routes with shared templates

Question

I'm creating an Ember whose main purpose is to show a collection of information in a few different ways. The main structure of the data is as such: Projects contain multiple Groups which contain multiple Documents. The Documents inside of a Group also have parent-child relationships to each other.

The two views of this data I am trying to create are:

View the relationships between a Group's Documents, and
View all the documents belonging to a Group

Both of these require selecting the Project and Group before displaying the information, while the first also requires selecting an initial Document. This functionality of selecting Projects, Groups, and Documents will also be used in other views of the data.

Because of this, I was hoping to reuse a bunch of routes and templates across the different views.

I currently have the first view working, with this route map (and associated routes and templates):

this.resource('RelationshipView', { path: '/relationship'}, function(){
  this.resource('Project', { path: '/:project_id'}, function(){
    this.resource('Group', { path: '/:group_id'}, function(){
      this.resource('Document', { path: '/:doc_id'});
    });
  });
});

And I want to add this route map:

this.resource('DocumentTable', { path: '/relationship'}, function(){
  this.resource('Project', { path: '/:project_id'}, function(){
    this.resource('Group', { path: '/:group_id'});
  });
});

I initially tried to change the name of the last resource and create a new template for it. But I run into trouble with linking to it from the parent resource.

The next thought was to change the template that is rendered for a route if the current path is an endpoint. But now I'm running into a problem of being in ./RelationshipView/ and clicking on a link to go to ./RelationshipView/:project_id and ending up in./DocumentTable/:project_id

Does anyone have any ideas?

Right now it seems that I'll have to give up on the idea of template and route reuse, which means a bunch of copy-pasting :(

GJK GJK · Accepted Answer · 2014-11-30T16:45:51

You should try using a partial template. Put the real template code in a separate partial, then just call that partial in the Group templates. I find this to be much more understandable than changing which template a route will render.

You are likely going to have to rename your resources though. You can't have multiple resources with the same name. But if you're using partials to share the templates, the name shouldn't matter.

Multiple nested routes with shared templates

1 Answers