title: Different UIs/templates in one app
body: <p>Have a situation where I would like to have two types of interface. One is the default application, and the other is a fullscreen mode for login screens etc.</p>
  
  <p>After playing around for a while, I thought I'd try using two named outlets in the application template:</p>
  
  <pre><code>{{outlet main}}
  
  {{outlet alternative}}
  </code></pre>
  
  <p>I then have a master template:</p>
  
  <pre><code>{{partial "wrapper"}}
  
  {{outlet}}
  
  {{partial "footer"}}
  </code></pre>
  
  <p>Which gets rendered into <code>{{outlet main}}</code> by (I'm using Ember App Kit, so the below is equivalent to App.ApplicationRoute = Ember.Route.extend({...):</p>
  
  <pre><code>export default Ember.Route.extend({
  
      renderTemplate: function() {
          this._super();
          this.render('master', {
              outlet: 'main',
              into: 'application'
          });
      },
  
  });
  </code></pre>
  
  <p>Now, the issue is when I want to blow away the master template, and have a different look and feel to the page altogether, like a fullscreen login page, with no wrapper/sidebar or footer.</p>
  
  <p>I thought I could deactivate <code>{{outlet main}}</code> with disconnectOutlet in my LoginRoute, and just push the new login template to <code>{{outlet alternative}}</code> like so:</p>
  
  <pre><code>export default Ember.Route.extend({
  
    renderTemplate: function() {
      this.disconnectOutlet({
          outlet: 'main',
          into: 'application'
      });
  
      this.render('login', {
          outlet: 'alternative',
          into: 'application'
      });
    },
  
  });
  </code></pre>
  
  <p>This though, results in <code>{{outlet main}}</code> still being rendered (I imagine due to the ApplicationRoute - renderTemplate of LoginRoute doesn't override it?), and the login template renders underneath it (aka, down the page/below the fold).</p>
  
  <p>Does anyone know how to perform this complete switching of UI in Ember?</p>