javascript - backbone.marionette.js 中的嵌套布局

Question

假设我已经为 Backbone.js 和 Marionette.backbone.js 精心编写了这段 JavaScript:

(function () {
    var Application;

    $(function () {

        Application = new Backbone.Marionette.Application();

        Application.addRegions({
            top:    "#top",
            middle: "#middle",
            bottom: "#bottom"
        });

        var topLayout = Backbone.Marionette.ItemView.extend({
            template:   "#tpl_topLayout",
            tagName:    "article"
        });
        var middleLayout = Backbone.Marionette.Layout.extend({
            template:   "#tpl_middleLayout",

            regions:    {
                left:   "#left",
                right:  "#right"
            }
        });

        var middleLayoutOne = Backbone.Marionette.ItemView.extend({
            template:   "#tpl_middleLayoutOne",
            tagName:    "article"
        });
        var middleLayoutTwo = Backbone.Marionette.ItemView.extend({
            template:   "#tpl_middleLayoutTwo",
            tagName:    "article"
        });

        var bottomLayout = Backbone.Marionette.ItemView.extend({
            template:   "#tpl_bottomLayout",
            tagName:    "article"
        });

        var a = new middleLayout;

        a.left.show(new middleLayoutOne);
        a.right.show(new middleLayoutTwo);

        Application.top.show(new topLayout);
        Application.middle.show(a);
        Application.bottom.show(new bottomLayout);

        Application.start();
    });

}());

和这个 HTML ...

<article id="layouts">
    <section id="top"></section>
    <section id="middle"></section>
    <section id="bottom"></section>
</article>
<script type="text/template" id="tpl_topLayout">
    Top layout
</script>
<script type="text/template" id="tpl_middleLayout">
    Middle layout
    <div id="left"></div>
    <div id="right"></div>
</script>
<script type="text/template" id="tpl_middleLayoutOne">
    Middle layout 1
</script>
<script type="text/template" id="tpl_middleLayoutTwo">
    Middle layout 2
</script>
<script type="text/template" id="tpl_bottomLayout">
    Bottom layout
</script>

“中间”布局未正确呈现(呈现#tpl_middleLayout，但不呈现#tpl_middleLayoutOne 或#tpl_middleLayoutTwo)。

关于我“忘记”做什么的任何想法？我对/为什么/它不起作用有我的猜测，但不知道如何解决这个问题..而且谷歌似乎还不想让我知道答案。 :)

非常非常感谢任何帮助。

Answer 1

当显示父 View 时，所有现有的 subview 都将关闭，因此只需更改代码的顺序以在显示其中的 subview 之前先显示父 View

Application.middle.show(a);
a.left.show(new middleLayoutOne);
a.right.show(new middleLayoutTwo);