Backbone.js 嵌套木偶布局未渲染

我有两种布局。第一个布局负责呈现一个子布局（由于我的界面相当复杂，很快就会有很多子布局和视图）

以下是第一个布局：

App.module('Layouts', function(Layouts, App, Backbone, Marionette, $, _) {

    Layouts.Editor = Backbone.Marionette.Layout.extend({

        tagName: 'div',
        className: 'content container-fluid',

        regions: {
            stageContainer: '#stage-container',
        },

        initialize: function() {

            this.template = Backbone.Marionette.TemplateCache.get('editor');

        },

        render: function() {

            var _this = this;

            this.model = new App.Models.App();
            this.model.url = GLOBAL.api.url + '/clients/' + GLOBAL.cid + '/sweepstakes/' + GLOBAL.aid;
            this.model.fetch({ success: function() {

                // show template
                $(_this.el).html(_this.template());

                // show region content
                _this.showStageContainer();

            } });

        },

        showStageContainer: function() {

            var content = new App.Layouts.EditorStageContainer({
                model: this.model
            });
            this.stageContainer.show(content);

            return content;

        }

    });

});

这样就可以了。但是，当我尝试在

showStageContainer

函数中渲染我的子布局时，会调用渲染，但实际上不会渲染我的内容。值得注意的是，我在获取模型后调用showStageContainer，因为我需要将模型向下传递到布局和子视图。以下是舞台容器布局的外观：

App.module('Layouts', function(Layouts, App, Backbone, Marionette, $, _) {

    Layouts.EditorStageContainer = Backbone.Marionette.Layout.extend({

        el: '#stage-container',
        tagName: 'div',

        regions: {
            nav: '#nav',
            progress: '#progress',
            stage: '#stage'
        },

        initialize: function() {

            this.template = Backbone.Marionette.TemplateCache.get('editor_stage_container');

        },

        render: function() {

            console.log('render');

            $(this.el).html(this.template());

        },

        onShow: function() {

            // TODO: figure out why the template has to be rendered on show rather
            // than in the render. (render is never being called as onRender is not called)
            $(this.el).html(this.template());

            // show region content
            this.showNav();

        },

        showNav: function() {

            var content = new App.Views.EditorStageNav();
            this.nav.show(content);

        }

    });

});

如您所见，我必须在

onShow

函数中手动渲染模板。通常，这应该在

render

函数中自动发生

最有趣的是，如果我将setTimeout包装为

$（this.el）.html（this.template（））在渲染函数中，一切正常。。。这让我相信有些事情没有按顺序执行。例如：

var _this = this;
render: function() {
    setTimeout(function() {
        $(_this.el).html(_this.template());
    }, 1);
}

有什么想法吗？我在这里不知所措，真的需要一些帮助。谢谢
 我相信你在时间上遇到了问题。在呈现DOM之前，区域stageContainer不存在。呈现html后，木偶将stageContainer指向元素#stage container。正如您所发现的，您可以轻松地在onRender方法中访问该区域，因为onRender是在DOM存在后启动的

有很多解决办法，我发现其中很多都是这样。就我个人而言，我只在父容器渲染后渲染stageContainer，从而将应用程序的这一部分分割成更小的部分

**编辑

我刚刚看到一个名为的木偶插件的链接。它看起来很有趣，但最重要的是，它将为您提供一个示例，说明如何在木偶中执行要求，然后在BossView中执行要求。
即使木偶已从布局更新为布局视图，这仍然是一个问题。由于时间问题，子视图未附着。当您试图显示其子级时，LayoutView没有附加其DOM组件。在木偶2.4.7中，当使用LayoutView时，正确的解决方案是在onBeforeShow方法中显示您的孩子

您可以在此处找到更多文档：