Question

我有两种布局。第一个布局负责渲染子布局（很快就会有很多子布局和视图，因为我的界面相当复杂）。

这是第一个布局：

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函数中自动发生。

最有趣的是，如果我在渲染函数中将$(this.el).html(this.template());周围的setTimeout包装好，一切都很好......这让我相信某些东西没有按顺序执行。例如：

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

有什么想法？在这里不知所措，真的可以使用一些帮助。谢谢！

Answer 1

我相信你遇到时间问题。在呈现DOM之前，区域stageContainer不存在。一旦html被渲染，Marionette会将stageContainer指向元素#stage-container。如您所见，您可以在onRender方法中轻松访问该区域，因为在DOM存在后onRender将启动。

有许多工作，我发现其中很多都是如此。就个人而言，我只是在渲染父容器后渲染stageContainer，将应用程序的这一部分分解为更小的部分。

**修改

我刚刚看到一个名为BossView的Marionette.js插件的链接。它看起来很有趣，但最重要的是，它会举例说明你在Marionette中做的事情，以及如何在BossView中做到这一点。

Answer 2

尽管Marionette已经从Layout更新到LayoutView，但这仍然是一个问题。由于时间问题，子视图不附加。当您尝试显示其子项时，LayoutView没有附加其DOM组件。在Marionette 2.4.7中，使用LayoutView时，正确的解决方案是在onBeforeShow方法中显示您的孩子。

您可以在此处找到更多文档：http://marionettejs.com/docs/v2.4.7/marionette.layoutview.html#efficient-nested-view-structures

嵌套的木偶布局无法渲染

2 个答案: