了解Marionette for Backbone.js的布局

Chr*_*row 8 javascript backbone.js backbone-relational backbone-views marionette

我想我可能对如何Marionette.Layout使用有一个根本的误解.

我正在尝试这样的事情:

在此输入图像描述

布局包括两个Marinotette.ItemView:"爆炸" ItemView和"PopStar" ItemView.此布局旨在始终包含这些视图,因此我尝试这样做:

var TheLayout = Backbone.Marionette.Layout.extend({
    template: '#the=layout-template',
    regions: {
        explode: '#explode-region',
        popstar: '#popstar-region'
    }
    initialize:function(options){
        _.bindAll(this);

        var explodeView = new ExplodeView();
        this.explode.show(explodeView);        // <-- This throws and exception because the regions are not available yet

    }
})
Run Code Online (Sandbox Code Playgroud)

但看起来区域在渲染布局之后才可用.我this.render()在添加视图之前尝试过调用,但这没有用.我很确定这里的根本问题是我在错误的情况下应用布局.

在这种情况下我该怎么做?什么时候使用正确Marionette.Layout

谢谢!

Ton*_*leh 17

在布局的onRender方法中显示区域视图.码:

var TheLayout = Backbone.Marionette.Layout.extend({
    template: '#the=layout-template',
    regions: {
        explode: '#explode-region',
        popstar: '#popstar-region'
    }
    onRender: function() {
        var explodeView = new ExplodeView();
        this.explode.show(explodeView);
    }
})
Run Code Online (Sandbox Code Playgroud)

请注意,在这种情况下,_.bindAll(this)不需要.

  • 对于Marionette直接调用的大多数方法,例如事件处理程序和`onRender`,`onClose`,上下文由Marionette正确设置,并且您不需要`bindAll`.如果其他人正在调用你的方法,从AJAX说jQuery回调或直接使用jquery绑定事件,并且你希望上下文`this`仍然是视图,那么`_.bindAll(this,'myfunc')`是你的朋友. (4认同)