Not rendering/removing sidebar based on route

Question

Something I've been experimenting around with Ember for a couple of hours and can't work out. Hopefully it's just a terminology issue that I'm getting stumped on as I read through the Ember docs.

I have an application, that, for the most part, consists of a sidebar/top bar (called wrapper), and a footer.

My basic application.hbs looks like this (I'm using Ember App Kit to provide structure):

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

If this was the state of my application, it would work pretty well. Page content loads in the {{outlet}} fine.

My main issue is how to break out of this template structure in an "Ember" way (and preferably without going all jQuery and removing DOM elements willy-nilly).

I have a few routes that I don't want the wrapper and the footer to show on (they're full page login/forgot password routes, and a couple of minimal interface/no distractions modes).

I experimented with trying to remove the sidebar and footer by making the default template (application.hbs):

{{#if showWrappers}}
    {{partial "wrapper"}}
{{/if}}

{{outlet}}

{{#if showWrappers}}
    {{partial "footer"}}
{{/if}}

Where showWrappers is in the ApplicationController:

export default Ember.Controller.extend({

    showWrappers: function() {
        var routes = ['login'],
                currentPath = this.get('currentPath'),
                show = true;

        routes.forEach(function(item) {
                var path = new RegExp('^' + item + '*');
                if (!Ember.isEmpty(currentPath.match(path))) {
                    show = false;
                }
        });

        return show;
    }.property('currentPath'),

});

Attemping to transition to /login from / using {{link-to}} returns in an error: Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM presumably because I'm removing things Ember wanted to keep (I am using {{link-to}} and {{bind-attr}} in the sidebar, so there are bindings there).

Aware that I could use actions and jQuery to hide elements of the page and bring them back for the "distraction free" mode, but I'd prefer to learn how to structure templates and use Routes with the renderTemplate hook potentially using this.render (?) to blow away the current DOM and rebuild from a different base (rather than application.hbs).

Thoughts? More than happy to clarify.

Answer 1

I have discovered disconnectOutlet, and have converted my partials into outlets:

{{outlet wrapper}}

{{outlet}}

{{outlet footer}}

Made my ApplicationRoute render to them by default:

export default Ember.Route.extend({

    renderTemplate: function() {
        this.render();

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

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

});

and then on the LoginRoute, I just run this.disconnectOutlet for both wrapper and footer, and seems to work pretty well.