Nested layouts in backbone.marionette.js

Question

Let's say that I have this JavaScript all nicely written out for Backbone.js, with 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();
    });

}());

and this 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>

The 'middle' layout doesn't render properly (it renders #tpl_middleLayout, but not #tpl_middleLayoutOne or #tpl_middleLayoutTwo).

Any ideas on what I'm "forgetting" to do? I've got my guesses as to /why/ it's not working, but no idea on how to fix that problem .. and Google doesn't seem to want me to know the answer yet. :)

Any help would be very, very much appreciated.

Answer 1

when a parent is shown, all of it's existing children are closed so just change the order your code to show the parent view before showing children inside of it

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

Answer 2

Here follows the working JSFiddle. What happens is that your nested views are closed if you show your middle region after showing them. It's a "cascade". :)

So:

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