Route renderTemplate with two Outlets

1

http://jsbin.com/EDAWIQi/3/edit?html,js,output

So here’s my situation, I basically have 2 outlets that I want to have displayed at the same time…the real implementation will be a little different, with the {{outlet full-task-plane}} animating in over the regular outlet. But here I have included a simplified version in this JSBin.

When I click the “Account” link, I want several things to happen:

  1. The URL should update to #/account and the account route should be rendered into the {{outlet full-task-plane}}
  2. The regular {{outlet}} should still contain the same route that you were on before you clicked on the “Account” link. (In this simple example it will always be the Index route)
  3. When you close the #/account full-task-plane, it the URL will update to the previous route and the full-task-plane will animate off the screen (or just close in this example).

When I use renderTemplate as I have done within App.AccountRoute, the {{outlet}} within the account template doesn’t display…I was expecting it to display the account/index template. If I comment out the renderTemplate function, it will display as expected just in the regular {{outlet}} instead of my {{outlet full-task-plane}}. Can anyone help me identify what I am missing here or if this is feasible?

2

does this jsBin do what you want? I only added the ‘renderTemplate’ method inside the AccountIndexRoute to ‘force’ it to render inside the Account {{outlet}}

http://jsbin.com/EDAWIQi/5/edit

Not sure if the routes work as you’d like though since it’s in JSBin

1 Like
3

As far as I can determine it is only possible if the route is nested. There is no way to tell a route not to replace the current route – even if you use a named outlet, and don’t have a generic render call in renderTemplate – unless that current route is a parent of the route you are transitioning to.

So, if you have Parent->Account route hierarchy and Parent renders into {{outlet}} and Account renders into {{outlet pane}} it will work. You need a specific renderTemplate: render(outlet: pane).

But if you want Account route to overlay on a sibling route or anything other than an immediate Parent route, you cannot currently do this. Even though you do renderTemplate: render(outlet: pane), the regular {{outlet}} will be cleared.

This issue I am having is actually related: if there was an ability to specify that particular routes should not destroy particular outlets, caching expensive views would be easy. This question I asked about displaying multiple master/detail editors simultaneously is also the same issue at heart. After trying many things, what I ended up doing in the app I am currently developing is to have 1 top level template which renders and/or has named outlets for everything, and under which all routes are nested. Sibling routes won’t destroy each other if they don’t render themselves but are rendered by their parent.

This github issue discussion is also related.

1 Like
4

Sorry for the delayed response, Thanks so much…I’m pretty sure that this is exactly what I was looking for!

I just needed to add that extra renderTemplate within the actual index route.