Extra wrappers in Backbone and Marionette

Question

Using Backbone and Marionette, I've created a new layout that goes into the main content div on my page. The layout looks like this:

<div id='dash-sidebar'>
    <div id='dash-profile'></div>
    <div id='dash-nav'></div> 
</div>
<div id='dash-content'></div>

The issue is that when I render the layout, Backbone automatically wraps it in a div before putting it into the main content div like this:

<div id='main-content'>    
  <div>
    <div id='dash-sidebar'>
      <div id='dash-profile'></div>
       <div id='dash-nav'></div> 
    </div>
    <div id='dash-content'></div>
  </div>
</div>

I know that I can change the element with tagName, but is it possible to avoid wrapping the template altogether and just insert it directly into the main content div on the page?

Answer 1

Each Backbone View must be represented by a single element. Your first HTML block has two elements, which is why it cannot be represented by a view without first wrapping it in an outer div.

Could you refactor your Layout to include the main-content area as well? Then the Layout's el would correspond to the entire outer div.

Another thing to try would be using Backbone.View's setElement() method to override the creation of the outer div, and manually inject the HTML that you want for the element in a View. Something like:

onRender: function() {
    this.setElement( /* the HTML you want for your layout */ );
}

I'm not sure how this would work if you passed in HTML that had two parent elements instead of just one, however.