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:

enter image description here

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!

Tony Abou-Assaleh Tony Abou-Assaleh · Accepted Answer · 2012-08-15T22:35:27

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.

Understanding layouts in Marionette for Backbone.js

1 Answers