How to remove a region from Marionette LayoutView...?

Question

In my template, I have 2 element inside #header and #content like this:

Social.AppLayout = Backbone.Marionette.LayoutView.extend({
        el:'div#wrapper',
        template:'#appTemp',
        regions:{
            header:'div#header',
            content:'div#content'
        }
    });

But while i show the login page, I don't want to render the content element in the page. so i trying to remove that region while i render the layout like this:

Social.App.addInitializer(function(){
        this.route = new Social.Routes;
        this.layout = new Social.AppLayout;
        this.layout.removeRegion("content", "#content"); // removing the content region !?
        this.layout.render();
        Backbone.history.start();
    });

But it's not removed. My question is:

a) How can I show the appropriate regions for the appropriate page? b) what is the purpose of adding and removing regions then?

Can any one explain me please? show me the right way to implement this please? Thanks In advance!

Answer 1

To address the use-case described, views for Header and Content need to be incorporated with the Region concept. Working example is in here

HTML Code:

<div id="container"></div>

<script id="appTemp" type="text/html">
  <div id="header"></div>
  <div id="content"></div>
</script>


<script id="headerTmpl" type="text/html">
  <div>Header</div>
</script>

<script id="contentTmpl" type="text/html">
  <div>Content</div>
</script>

JavaScript Code:

var HeaderView = Backbone.Marionette.ItemView.extend({
        template:'#headerTmpl'
});

var ContentView = Backbone.Marionette.ItemView.extend({
        template:'#contentTmpl'
});

AppLayout = Backbone.Marionette.LayoutView.extend({
        el:'div#container',
        template:'#appTemp',
        regions:{
            header:'div#header',
            content:'div#content'
        },
        onRender: function() {
            //console.log ('show menu');
            if (this.header)
                this.header.show (new HeaderView());
            if (this.content)
                this.content.show (new ContentView());
        }
});


layout = new AppLayout();
//layout.removeRegion("content");//uncomment this to remove the content region
layout.render();