EmberJS: Different Layout Homepage vs Application

Question

I'm not sure that the title of this question is the best, but I'll describe my situation. I have an Ember application with a "Home" route that is the landing page, and several other routes that are part of the application. The Home template doesn't share any layout with the other templates, but I need to be able to transition to these other routes from the Home route.

Attempt 1 - Branching Application Template (same outlet name):

<script type="text/x-handlebars">
    {{#if isHome}}
        {{outlet main}}
    {{else}}
        {{render header}}
        <section class="container content-wrapper main-content clear-fix" >
            {{outlet main}}
            {{error-dialog}}
        </section>
    {{/if}}
</script>

App.ApplicationController = Ember.Controller.extend({
    isHome: function (){
        return this.get('currentPath') == 'home';
    }.property('currentPath'),
});

This caused a weird bug where the the first template rendered into the else path after transitioning from the Home page would not unload from the DOM following later transitions. I attributed this to the fact that the main outlet instance is different depending on the if statement, but it's just a guess.

Attempt 2 - Branching Application Template (different outlet names):

<script type="text/x-handlebars">
    {{#if isHome}}
        {{outlet home}}
    {{else}}
        {{render header}}
        <section class="container content-wrapper main-content clear-fix" >
            {{outlet main}}
            {{error-dialog}}
        </section>
    {{/if}}
</script>

I then overloaded renderTemplate in HomeRoute to point it to the home outlet, but it refused to load content into that outlet.

Attempt 3 - Branching wrapper elements:

<script type="text/x-handlebars">
    {{#if isNotHome}}
        {{render header}}
        <section class="container content-wrapper main-content clear-fix" >
    {{/if}}
    {{outlet main}}
    {{#if isNotHome}}
        {{error-dialog}}
        </section>
    {{/if}}
</script>

This mostly works, but the resulting rendered HTML does not wrap the main outlet content in <section> as I would expect. Instead it treats the <section> tag as if it ends in the first if statement, which breaks my CSS.

I feel like I must be missing something fundamental here.

Matt Baker Matt Baker · Accepted Answer · 2014-01-28T03:09:40

So somehow I must have made a careless mistake in my call to renderTemplate. Here is what finally worked.

<script type="text/x-handlebars" data-template-name="application">
    {{#if isHome}}
        {{outlet home}}
    {{else}}
        {{render header}}
        <section class="container content-wrapper main-content clear-fix" >
            {{animated-outlet name="main"}}
            {{error-dialog}}
        </section>
    {{/if}}
</script>

App.ApplicationController = Ember.Controller.extend({
    isHome: function (){
        return this.get('currentPath') == 'home';
    }.property('currentPath'),
});

App.HomeRoute = Ember.Route.extend({
    renderTemplate: function (){
        this.render({ outlet: 'home' });
    }
});

App.OtherRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({ outlet: 'main' });
    }
});

EmberJS: Different Layout Homepage vs Application

2 Answers