Choose application template depending on its content


#1

I would like to have multiple application templates in my application. For example:

  1. a two-column template that contains a navigation sidebar and a main content
  2. a full page template that contains only a main content

The template is basically dependent on a route.

Routing:

/              -> two-column template with navigation
/some-page     -> two-column template with navigation
/about         -> full page template

A desired behavior would be to not re-render navigation sidebar when transitioning between / and /some-page. I think this can be best accomplished by {{outlet}}.

The templates would look like this:

<!-- two-column.hbs -->
<div class="sidebar">
  {{outlet navigation}}
</div>
<div>
  {{outlet}}
</div>

and

<!-- full-page.hbs -->
{{outlet}}

But I don’t know where to put the template selecting logic. I think the ApplicationRoute should be the right place to select the template, but I don’t know how to propagate the template name from its child routes like IndexRoute. Also, the navigation outlet will contain a complex content with it’s own models, controllers and views. I don’t know where to setup that part.

Another solution that I can think of is setting a layoutName: 'twoColumn' inside of IndexView and SomePageView .

I found out that using layoutName inside of ApplicationView also works, but again I don’t know how to access its child view.

I’m wondering what is the best practice here. How would you guys do it?