Backbone.js 如何正确使用木偶布局？

我当前的代码如下所示：

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);
    }

});

似乎只有在创建布局时区域对象中指定的元素已经存在时，布局才起作用。但文件表明情况并非如此

我可能做错了什么。但是什么呢

问候

---

罗杰

在第二个代码示例中，尝试使用

onShow

而不是

onRender

此外，在木偶中，您通常不会自己调用

render

，因为当您将视图/布局传递给

show

方法时，框架将调用该方法

在这里，您可以看到您试图实现的目标的不同看法：

• （特别是第43-46行）

---

作为附加警告，在

onRender

方法中调用

.show（）

可能会对嵌套在该布局下的任何内容产生负面影响，特别是当您稍后尝试使用

onShow

以确保视图的DOM子树可通过jQuery访问时

---

.show（）

在该布局的任何子视图中触发“show”事件，这可能意味着在这些子视图呈现和插入内容之前，在这些子视图（侦听“show”事件）中调用

onShow（）

作为补充，如果您使用的是木偶1.8，您现在可以利用它来确保最初呈现的内容和新呈现的内容在DOM中完全呈现。