I would like to have multiple application templates in my application. For example:
- a two-column template that contains a navigation sidebar and a main content
- 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?