Understanding layouts in Marionette for Backbone.js

Question

I think I may have a fundamental misunderstanding of how Marionette.Layout is intended to be used.

I'm trying to something like this:

The layout includes two Marinotette.ItemViews: The "Explode" ItemView and the "PopStar" ItemView. This layout is designed to always contain these views, so I tried to do this:

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

    }
})

But it looks like the regions are not available until after the layout is rendered. I tried calling this.render() before adding the views in, but this didn't work. I'm pretty sure the fundamental problem here is that I'm applying the layout in the wrong circumstance.

What should I be doing in this circumstance? When is the correct time to use Marionette.Layout?

Thanks!

Slumber

Answer 1

Show the region views in the layout's onRender method. Code:

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

Note that in this case the _.bindAll(this) is not needed.

Catamite

Regarding the _.bindAll(this) i am still confused in what cases to use it and in what cases not to. – Filaria

For most methods called directly by Marionette, such as event handlers and onRender, onClose, the context is set correctly by Marionette and and you don't need the bindAll. If someone else is calling your method, say a jQuery callback from AJAX or event bound directly using jquery, and you want the context this to still be the view, then _.bindAll(this, 'myfunc') is your friend. – Catamite