Как удалить регион из Marionette LayoutView?

В моем шаблоне у меня есть 2 элемента внутри #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();
    });

Но не удаляется. Мой вопрос:

а) Как я могу показать соответствующие регионы для соответствующей страницы? б) в чем тогда смысл добавления и удаления регионов?

Может ли кто-нибудь объяснить мне, пожалуйста? покажите мне правильный способ реализовать это, пожалуйста? Заранее спасибо!


jquery backbone.js marionette
person 3gwebtrain    schedule 07.09.2014    source источник
comment
Поскольку вы указываете селектор для своего el, я предполагаю, что вы прикрепляете свое представление к уже отображаемой странице?   -  person kinakuta    schedule 07.09.2014

Ответы (1)


arrow_upward
1
arrow_downward

Для реализации описанного варианта использования представления для заголовка и содержимого необходимо включить в концепцию региона. Рабочий пример находится здесь

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();
person Ming Chan    schedule 07.09.2014
comment
Я согласился с вашим ответом. У меня к вам еще один вопрос. В случае, если у меня есть элемент внутри contaiener, скажем, «headerContaienr», есть ли способ добавить мой заголовок в «headerContainer» внутри элемента «contaiener»? - вот скрипт jsfiddle.net/q0Lbv61s/8 - person 3gwebtrain; 08.09.2014