3

我当前的代码如下所示：

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

});

似乎只有在创建布局时区域对象中指定的元素已经存在时，布局才有效。但是文档说情况并非如此。

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

问候罗杰

4

2 回答 2

4

在您的第二个代码示例中，尝试使用onShow而不是onRender.

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

您可以在这里看到对您要完成的工作的不同看法：

于 2013-08-26T06:34:06.430 回答
2

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

.show()在该布局的任何子视图中触发“显示”事件，并且可能意味着onShow()在这些子视图呈现并插入其内容之前在这些子视图（侦听“显示”事件）中调用该事件。

于 2013-11-19T01:20:58.473 回答