title: Marionette Layout: $el is not rendered when explicitly defined
body: <p>In <a href="http://jsfiddle.net/darksoulsong/4HK3D/1/" rel="nofollow">this fiddle</a> I have a dummy code of a issue I'm having with $el in a Backbone.Marionette app.</p>
  
  <p>When I define a Layout, even if $el's length is 1, it is not inserted to the page. But everything works if I let the element with its default config, that is, a div.</p>
  
  <p>Here is the code that declares the Application, defines a main region to it, creates a new layout and item views :</p>
  
  <pre><code>var App = new Backbone.Marionette.Application();
  
          App.addRegions({
              page: "#page"
          });
  
          App.PageLayout = Backbone.Marionette.Layout.extend({
              template: "#page-template",
              className: "container",
              regions: {
                  header: "#main-header",
                  content: "#main-content",
                  footer: "#main-footer"
              }
          });
  
          App.HeaderView = Backbone.Marionette.ItemView.extend({
              initialize: function() {
                  console.log(this.$el.length); // 1
              },
  
              el: "#main-header",
              template: "#header-template",
          });
  
          App.FooterView = Backbone.Marionette.ItemView.extend({
              initialize: function() {
                  console.log(this.$el.length); // 1
              },
              el: "#main-footer",
              template: "#footer-template"
          });
  
          App.ContentView = Backbone.Marionette.ItemView.extend({
              initialize: function() {
                  console.log(this.$el.length); // 1
              },
              el: "#main-content",
              template: "#content-template"
          });
  
  
  
          App.on("initialize:after", function() {
              var pageLayout = new App.PageLayout;
  
              App.page.show(pageLayout);
  
              pageLayout.header.show(new App.HeaderView);
              pageLayout.content.show(new App.ContentView);
              pageLayout.footer.show(new App.FooterView);
          });
  
          App.start();
  </code></pre>
  
  <p><strong>The templates:</strong></p>
  
  <pre><code>&lt;script id="header-template" type="text/template"&gt;
          Awesome Inc.
      &lt;/script&gt;
      &lt;script id="footer-template" type="text/template"&gt;
          &lt;li&gt; &lt;a href="#"&gt;Like us on Facebook&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Tweet us&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Hate us on Hatey.com&lt;/a&gt; &lt;/li&gt;
      &lt;/script&gt;
      &lt;script id="page-template" type="text/template"&gt;
          &lt;header id="main-header"&gt;&lt;/header&gt;
          &lt;section id="main-content"&gt;&lt;/section&gt;
          &lt;footer id="main-footer"&gt;&lt;/footer&gt;
      &lt;/script&gt;
      &lt;script id="footer-template" type="text/template"&gt;
          &lt;li&gt; &lt;a href="#"&gt;Like&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Tweet us&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Hate&lt;/a&gt; &lt;/li&gt;
      &lt;/script&gt;
      &lt;script id="content-template" type="text/template"&gt;
          &lt;h1&gt;Welcome to this World&lt;/h1&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>And finally, the main element, in the page:</strong></p>
  
  <pre><code>&lt;main id="page"&gt;Loading...&lt;/main&gt;
  </code></pre>
  
  <p>I need the layout to find the region that was rendered (since the App instance has handled that already) and append the related ItemView content to it.</p>
  
  <p>I wonder if I'm missing something really obvious.</p>
  
  <p>Any help would be great!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>After some pointers by @DavidSulc, I have figured out that I'm unable to do this the way I need. </p>
  
  <p>That means I can't create some regions in the layout, attach some item views, making the item views' el the same as the regions defined on the layout. So I will learn to like the extra div created inside the region. In my opinion, this just causes extra and undesired markup - Why can't I use the region's element as long as it is rendered already?
  If there is another way to do this, I would appreciate any ideas.</p>