8

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!

Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258

1 Answers1

17

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.

Tony Abou-Assaleh
  • 3,000
  • 2
  • 25
  • 37
  • 1
    Regarding the `_.bindAll(this)` i am still confused in what cases to use it and in what cases not to. – CodeRain Sep 26 '12 at 13:13
  • 4
    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. – Tony Abou-Assaleh Sep 26 '12 at 17:26