title: How to avoid an extra div in a Backbone Marionette Region or LayoutView
body: <p>we are using <code>Backbone,Marionette and handlebars</code> for my application. When I try to render my view inside <code>Marionette.Region</code>, one extra <code>div</code> wrapping around the template. How can I avoid this.</p>
  
  <p>html code :</p>
  
  <pre><code> &lt;div id="mainDiv"&gt;&lt;/div&gt;
     &lt;script type="text/x-handlebars-template" id="basic"&gt;
          &lt;div id="first"&gt;&lt;/div&gt;
          &lt;div id="second"&gt;&lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>js code :</p>
  
  <pre><code> //function
  var templateCompilation=function(templateId,data){
     var alertCompilation=Handlebars.compile(document.getElementById(templateId).innerHTML);
     return alertCompilation(data);
  };
  
  //Application
  myApp = new Backbone.Marionette.Application();
  myApp.addRegions({
   mainContainer:"#mainDiv"
  });
  myApp.start();
  
  //first view
  var basicView=Marionette.ItemView.extend({
    template:function(){
       return templateCompilation("basic",{});
    }
  });
  
  //reding view
  var basicViewObj=new basicView();
  myApp.mainContainer.show(basicViewObj);
  </code></pre>
  
  <p>To avoid extra div, I try with following statements my bad luck nothing working.</p>
  
  <pre><code>var basicViewObj=new basicView({el:$("#mainDiv")});
  var basicViewObj=new basicView({tagName:""});
  </code></pre>
  
  <p>can anyone help me.</p>