如何从Marionette布局视图中删除区域.

Question

在我的模板中，#header and #content中有两个元素，如下所示：

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

但是，当我显示登录页面时，我不想在页面中呈现content元素。所以我试图在渲染布局时删除该区域，如下所示：

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

但它并没有被移除。我的问题是：

a） 如何显示相应页面的相应区域？b） 那么添加和删除区域的目的是什么？

谁能给我解释一下吗？请告诉我实现这一点的正确方法？提前感谢！

Answer 1

为了解决所描述的用例，Header和Content的视图需要与Region概念结合在一起。工作示例在这里

HTML代码：

<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代码：

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