Question

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

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

为了解决所描述的用例，标题和内容的视图需要与Region概念合并。工作示例位于here

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

如何从Marionette LayoutView中删除某个区域...？

1 个答案: