Nested layouts in backbone.marionette.js

Question

Say I have this JavaScript, well written 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 "medium" layout does not display properly (it displays #tpl_middleLayout, but not #tpl_middleLayoutOne or #tpl_middleLayoutTwo).

Any ideas on what I “forget” to do? I have a hunch about why / doesn’t work, but I don’t know how to fix this problem. And Google doesn't seem to want me to know the answer. :)

Any help would be very, very appreciated.

Answer 1

when the parent element is shown, all its existing children are closed, so just reorder your code to show the parent view before showing the child elements inside it

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

Answer 2

Here's a working JSFiddle . It happens that your subviews are closed if you show your middle region after the show . This is a cascade. :)

So:

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