了解Marionette for Backbone.js的布局

时间:2012-08-15 17:33:30

标签: javascript backbone.js marionette backbone-views backbone-relational

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

我正在尝试这样的事情:

enter image description here

布局包括两个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

    }
})

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

在这种情况下我该怎么办?何时是使用Marionette.Layout的正确时间?

谢谢!

1 个答案:

答案 0 :(得分: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);
    }
})

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