6

假设我用 Marionette.backbone.js 为 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）。

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

任何帮助将非常非常感谢。

4

2 回答 2

6

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

Application.middle.show(a);
a.left.show(new middleLayoutOne);
a.right.show(new middleLayoutTwo);
于 2013-11-13T17:26:37.473 回答
5

下面是工作的 JSFiddle。如果您在显示中间区域后显示嵌套视图，则会发生这种情况。这是一个“级联”。:)

所以：

var a = new middleLayout;
Application.middle.show(a);
a.left.show(new middleLayoutOne);
a.right.show(new middleLayoutTwo);
于 2013-11-13T17:40:25.013 回答