Databases
StackOverflow2013
Postsdbo
PONested layouts in backbone.marionette.js
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONested layouts in backbone.marionette.js
    text
    copied!<p>Let's say that I have this JavaScript all nicely written out for Backbone.js, with Marionette.backbone.js):</p> <pre><code>(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(); }); }()); </code></pre> <p>and this HTML ...</p> <pre><code>&lt;article id="layouts"&gt; &lt;section id="top"&gt;&lt;/section&gt; &lt;section id="middle"&gt;&lt;/section&gt; &lt;section id="bottom"&gt;&lt;/section&gt; &lt;/article&gt; &lt;script type="text/template" id="tpl_topLayout"&gt; Top layout &lt;/script&gt; &lt;script type="text/template" id="tpl_middleLayout"&gt; Middle layout &lt;div id="left"&gt;&lt;/div&gt; &lt;div id="right"&gt;&lt;/div&gt; &lt;/script&gt; &lt;script type="text/template" id="tpl_middleLayoutOne"&gt; Middle layout 1 &lt;/script&gt; &lt;script type="text/template" id="tpl_middleLayoutTwo"&gt; Middle layout 2 &lt;/script&gt; &lt;script type="text/template" id="tpl_bottomLayout"&gt; Bottom layout &lt;/script&gt; </code></pre> <p>The 'middle' layout doesn't render properly (it renders #tpl_middleLayout, but not #tpl_middleLayoutOne or #tpl_middleLayoutTwo).</p> <p>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. :)</p> <p>Any help would be very, very much appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload