Question

假设我已经为Backbone.js编写了很好的JavaScript，并使用了Marionette.backbone.js）：

(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

当显示父项时，所有现有的子项都已关闭，所以只需更改代码的顺序以显示父视图，然后再显示其中的子项

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

Answer 2

以下是working JSFiddle。如果您在显示中间区域后显示嵌套视图，则会发生这种情况。这是一个“级联”。：）

所以：

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

backbone.marionette.js中的嵌套布局

2 个答案: