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

});

似乎布局仅在创建布局时已存在区域对象中指定的元素时才有效。但文档说这不是这种情况。

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

此致罗杰

Answer 1

在第二个代码示例中，尝试使用onShow代替onRender。

此外，在Marionette中，您通常不会自己调用render，因为当您将视图/布局传递给show方法时，框架将调用该方法。

您可以在此处看到您想要完成的不同内容：

https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js（特别是第43-46行）

Answer 2

作为附加警告，在.show()方法中调用onRender可能会对嵌套在该布局下方的任何内容产生负面影响，尤其是如果您稍后尝试使用onShow以确保视图的DOM子树是jQuery可访问的。

.show()在该布局的任何子视图中触发“show”事件，这意味着在这些子视图呈现之前，这些子视图（监听“show”事件）中会调用onShow()插入他们的内容。

如何正确使用木偶布局？

2 个答案: