title: Extra divs in itemviews and layouts in Backbone.Marionette
body: <p>I am trying out Backbone.Marionette and I am confused as to why my Layouts and ItemViews keep generating extra divs.</p>
  
  <p>example is in Coffee btw.</p>
  
  <pre><code>AppLayout = Backbone.Marionette.Layout.extend
    template: "#my-layout",
  
    regions:
      menu: "#menu",
      content: "#content"
  
  MyMenuView = Backbone.Marionette.ItemView.extend
    template: '#project_wiz_nav_template'
  
  MyContentView = Backbone.Marionette.ItemView.extend
    template: '#project_setup_template'
  
  MyApp = new Backbone.Marionette.Application()
  
  MyApp.addRegions
    mainRegion: '#project'
  
  MyApp.addInitializer -&gt;
    layout = new AppLayout()
    MyApp.mainRegion.show(layout)
  
    layout.menu.show(new MyMenuView())
    layout.content.show(new MyContentView())
  
  MyApp.start()
  </code></pre>
  
  <p>This is what index.html contains:</p>
  
  <pre><code>&lt;div id='project'&gt;&lt;/div&gt;
  &lt;script type='text/template' id='project_wiz_nav_template'&gt; &lt;h2&gt;HI&lt;/h2&gt; &lt;/script&gt;
  &lt;script type='text/template' id='project_setup_template'&gt; &lt;h2&gt;WORLD&lt;/h2&gt; &lt;/script&gt;
  &lt;script id="my-layout" type="text/template"&gt;
    &lt;h2&gt;Hello!&lt;/h2&gt;
    &lt;div id="menu"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what it produces:</p>
  
  <pre><code>&lt;div id="project"&gt;
    &lt;div&gt;
      &lt;h2&gt;Hello!&lt;/h2&gt;
      &lt;div id="menu"&gt;
        &lt;div&gt; 
          &lt;h2&gt;HI&lt;/h2&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
        &lt;div&gt; 
          &lt;h2&gt;WORLD&lt;/h2&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, it keeps generating extra divs for the views and the layouts. I've tried adding <code>el: '#menu'</code> and <code>el: '#content'</code> to no avail. </p>