Different UIs/templates in one app

Question

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.

After playing around for a while, I thought I'd try using two named outlets in the application template:

{{outlet main}}

{{outlet alternative}}

I then have a master template:

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

Which gets rendered into {{outlet main}} by (I'm using Ember App Kit, so the below is equivalent to App.ApplicationRoute = Ember.Route.extend({...):

export default Ember.Route.extend({

    renderTemplate: function() {
        this._super();
        this.render('master', {
            outlet: 'main',
            into: 'application'
        });
    },

});

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.

I thought I could deactivate {{outlet main}} with disconnectOutlet in my LoginRoute, and just push the new login template to {{outlet alternative}} like so:

export default Ember.Route.extend({

  renderTemplate: function() {
    this.disconnectOutlet({
        outlet: 'main',
        into: 'application'
    });

    this.render('login', {
        outlet: 'alternative',
        into: 'application'
    });
  },

});

This though, results in {{outlet main}} 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).

Does anyone know how to perform this complete switching of UI in Ember?

Answer 1

This is definitely possible. Depending on your use case, if you just want to tear down some of the outlets for particular routes, you can use disconnectOutlets. However, if you want to go more low-level than that and completely swap out the main template that the application is using per route, it's still pretty easy to do. Take a look at this jsbin as an example.

Answer 2

I've wondered why there isn't an option for creating multiple application templates myself, but I think you can achieve what you're attempting to do by having your application template simply render a single outlet:

templates/application.hbs

{{outlet}}

And then you could use nested views and components to break up your applicaton:

templates/main.hbs

{{view 'TopNav'}}
{{view 'Blog'}}
{{view 'Footer'}}

templates/alternative.hbs

{{view 'Blog'}}

Answer 3

ember-elsewhere is well suited to rending things outside the normal route hierarchy and is recommended in the Ember docs.

Create a target:

{{from-elsewhere name="my-right-sidebar"}}

Anywhere else in your app, declare which component should render in the target -- complete with bound inputs and actions:

{{to-elsewhere named="my-right-sidebar"
  send=(component "cool-thing"
  model=model launch=(action "launchIt"))}}

More examples here: https://ef4.github.io/ember-elsewhere/