CODEWITHSUNDEEP
jquerybackbone.jsmarionette
3gwebtrain
3gwebtrain

Reputation: 15303

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

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!

Upvotes: 0

Views: 1336

Answers (1)

Ming Chan
Ming Chan

Reputation: 1948

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();

Upvotes: 1

Related Questions