3

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

这是第一个布局：

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

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

4

2 回答 2

2

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

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

**编辑

我刚刚发现了一个名为BossView的 Marionette.js 插件的链接。它看起来很有趣，但最重要的是，它将为您提供在 Marionette 中执行您所要求的操作以及如何在 BossView 中执行此操作的示例。

于 2013-09-23T23:28:10.853 回答
0

即使 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

于 2016-11-18T04:59:47.903 回答