javascript - backbone.marionette.js のネストされたレイアウト

Question

Backbone.js 用に、Marionette.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 はレンダリングされません)。

私が「忘れている」ことについてのアイデアはありますか？/なぜ/機能しないかについては推測していますが、その問題を解決する方法についてはわかりません..そして、Googleはまだ答えを知りたくないようです. :)

どんな助けでも大歓迎です。