title: Understanding layouts in Marionette for Backbone.js
body: <p>I think I may have a fundamental misunderstanding of how <code>Marionette.Layout</code> is intended to be used.</p>
  
  <p>I'm trying to something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/mFY4F.gif" alt="enter image description here"></p>
  
  <p>The layout includes two <code>Marinotette.ItemView</code>s: The "Explode" <code>ItemView</code> and the "PopStar" <code>ItemView</code>. This layout is designed to always contain these views, so I tried to do this:</p>
  
  <pre><code>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);        // &lt;-- This throws and exception because the regions are not available yet
  
      }
  })
  </code></pre>
  
  <p>But it looks like the regions are not available until after the layout is rendered. I tried calling <code>this.render()</code> 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.</p>
  
  <p>What should I be doing in this circumstance? When is the correct time to use <code>Marionette.Layout</code>?</p>
  
  <p>Thanks!</p>