Multiple {{outlet}}s in if/else statement

1

I am using ember-simple-auth for user authentication in my app and wanted to do this in my application.handelbars template:

{{#if session.isAuthenticated}}
  // Show editing controls intended for logged in user
  {{outlet}}
{{else}}
  // Show only the stuff normal users should see
  {{outlet}}
{{/if}}

Which all works fine until I do this:

  1. Login
  2. Get redirected to my routeAfterAuthentication route (which looks fine at this point)
  3. Click on a link to go to another dynamic (i.e. page) or non-dynamic route (i.e. the login page)

At this point, my page template is rendering twice. When I inspect using the Chrome Ember inspector it shows that page is being rendered once as an inline template, whatever that is, and then the other route (either the same dynamic page or another route) is being rendered beneath it.

Once I do a (hard) refresh of the page, the strange behavior stops happening until the next time I logout and repeat steps 1-3 above.

So, the problem was having two {{outlet}}s although I’m not sure exactly why, since I would expect that only one {{outlet}} should be showing at a time based on the if/else statement. Is this expected behavior?

2

I have tried something like this before and it has unintended consequences, so i stopped doing it.

3

@Jun_Andrew_Hu, yeah, fair enough, I did fix it, but I can imagine there are legitimate use-cases out there.

4

Multiple outlets do not make any sense.

Why don’t you use if statement to show or hide certain UI elements?

If you wish to show/hide outlets dynamically (which I think is not a good idea for this use case anyways), there is a disconnectOutlet function.

1 Like
5

Thanks for the info. I’ll check out that function, but in the meantime, I have done exactly what you suggested. I guess I wanted to make it all a little cleaner, i.e., separate all of the logged in code from the public code instead of doing it piecemeal. In other words, there is code before and after the {{outlet}} that only a logged in user should see.

Also, I’m using Zurb’s Foundation and I was trying to avoid wrapping individual UI elements in if statements to avoid the lovely <script> tags that Ember outputs which were messing with Foundation’s JS. So, I what I’m doing now is wrapping entire blocks of code in if/else statements with some repetition which is not very efficient IMO. But that’s another issue entirely.