Don't Use Two (Unnamed) Outlets in an Ember Template

Ember 1.8.1

Let's say you want to conditionally add a navbar and wrap the main content of your app when a user is logged in, but hide the navbar when the user is not logged in. Your first thought might be to write something like this:

{{#unless session.isAuthenticated}}
  {{outlet}}
{{else}}
  {{nav-bar user=session.current_user}}
  <main class='authenticated'>
    {{outlet}}
  </main>
{{/unless}}

Don't! Ember will explode in strange ways. The reason being that it doesn't like two unnamed outlets on the page. It gets confused and fails to clear them out correctly.

Instead name one of your outlets, like so:

{{#unless session.isAuthenticated}}
  {{outlet "unauthenticated"}}
{{else}}
  {{nav-bar user=session.current_user}}
  <main class='authenticated'>
    {{outlet}}
  </main>
{{/unless}}

Then in your unauthenticated routes, make sure they render into the visible outlet:

export default Ember.Route.extend({
  renderTemplate: function() {
    this.render({ outlet: 'unauthenticated' });
  }
});

That's it! Happy coding!