title: How to properly use Marionette layouts?
body: <p>my current code looks like this:</p>
  
  <pre><code>define([
      'jquery',
      'underscore',
      'backbone',
      'marionette',
      'templates',
      'gridView',
      'detailView',
      'detailModel'
  ], function ($, _, Backbone, Marionette, JST, GridView, DetailView, DetailModel) {
  
      'use strict';
  
      return  Marionette.Layout.extend({
  
          el: '#main',
  
          template: JST['app/scripts/templates/main.ejs'],
  
          initialize: function() {
              this.render();
          },
  
          onRender: function () {
              var Layout = Marionette.Layout.extend({
                  el: 'div',
  
                  template: _.template(""),
  
                  regions: {
                      grid: '#grid',
                      detail: '#detail'
                  }
              });
              this.layout = new Layout();
              this.layout.render();
          },
  
          showGrid: function () {
              var detailModel = new DetailModel();
  
              var g = new GridView(detailModel);
              var d = new DetailView(detailModel);
  
              this.layout.grid.show(g);
              this.layout.detail.show(d);
          }
  
      });
  
  });
  </code></pre>
  
  <p>What I do not understand is why I need an extra layout in my onRender method to make this work. The '#grid' and '#detail' divs are part of the main.ejs template, but the following does not work:</p>
  
  <pre><code> return  Marionette.Layout.extend({
  
      el: '#main',
  
      template: JST['app/scripts/templates/main.ejs'],
  
      regions: {
          grid: '#grid',
          detail: '#detail'
      },
  
      initialize: function() {
          this.render();
      },
  
      onRender: function () {
          var detailModel = new DetailModel();
  
          var g = new GridView(detailModel);
          var d = new DetailView(detailModel);
  
          this.grid.show(g);
          this.detail.show(d);
      }
  
  });
  </code></pre>
  
  <p>It seems that the layout only works if the elements specified in the region object already exist when the layout is created. But the documentation says that this is not the case.</p>
  
  <p>I'm probably doing something wrong. But what ?</p>
  
  <p>Regards
    Roger</p>