backbone.js - マリオネット レイアウトの適切な使用方法

Question

私の現在のコードは次のようになります。

define([
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'templates',
    'gridView',
    'detailView',
    'detailModel'
], function ($, _, Backbone, Marionette, JST, GridView, DetailView, DetailModel) {

    'use strict';

    return  Marionette.Layout.extend({

        el: '#main',

        template: JST['app/scripts/templates/main.ejs'],

        initialize: function() {
            this.render();
        },

        onRender: function () {
            var Layout = Marionette.Layout.extend({
                el: 'div',

                template: _.template(""),

                regions: {
                    grid: '#grid',
                    detail: '#detail'
                }
            });
            this.layout = new Layout();
            this.layout.render();
        },

        showGrid: function () {
            var detailModel = new DetailModel();

            var g = new GridView(detailModel);
            var d = new DetailView(detailModel);

            this.layout.grid.show(g);
            this.layout.detail.show(d);
        }

    });

});

私が理解していないのは、これを機能させるために onRender メソッドに追加のレイアウトが必要な理由です。'#grid' および '#detail' div は main.ejs テンプレートの一部ですが、以下は機能しません。

 return  Marionette.Layout.extend({

    el: '#main',

    template: JST['app/scripts/templates/main.ejs'],

    regions: {
        grid: '#grid',
        detail: '#detail'
    },

    initialize: function() {
        this.render();
    },

    onRender: function () {
        var detailModel = new DetailModel();

        var g = new GridView(detailModel);
        var d = new DetailView(detailModel);

        this.grid.show(g);
        this.detail.show(d);
    }

});

レイアウトが作成されたときに領域オブジェクトで指定された要素が既に存在する場合にのみ、レイアウトが機能するようです。しかし、ドキュメントによると、そうではありません。

私はおそらく何か間違ったことをしています。でも何？

よろしくロジャー