title: Marionette CollectionView wrapped in div
body: <p>I'm building html tables dynamically depending on the data with Marionette CollectionViews and ItemViews. The structure of the data looks like:</p>
  <pre><code>var itemData = [
  {
      row: &quot;row 1&quot;,
      items: [
          {
              item: &quot;row 1, item 1&quot;
          },
          {
              item: &quot;row 1, item 2&quot;
          }
      ]
  },
  {
      row: &quot;row 2&quot;,
      items: [
          {
              item: &quot;row 2, item 1&quot;
          },
          {
              item: &quot;row 2, item 2&quot;
          }
      ]
  }
  </code></pre>
  <p>];</p>
  <p>So I have a layout view for the table, a collection view for the rows, another collection view (child of the parent collection view), and item view for the table cells. My code is:</p>
  <pre><code>// A Grid Row
  var TableDataView = Backbone.Marionette.ItemView.extend({
      template: &quot;#data-template&quot;,
      tagName: &quot;td&quot;,
      
      initialize: function(){
          console.log('in TableDataView and this.model is ');
          console.log(this.model);
      }
  });
  
  // The grid view
  var TableRowView = Backbone.Marionette.CollectionView.extend({
      tagName: &quot;tr&quot;,
  
      childView: TableDataView
      
  });
  
  // The grid view
  var TableBodyView = Backbone.Marionette.CollectionView.extend({
      childView: TableRowView,
      
      childViewOptions: function(model, index) {
          return {
              collection: new Backbone.Collection(model.get('items'))
          };
      },    
  });
  
  var LayoutView = Backbone.Marionette.LayoutView.extend({
          template: &quot;#table-template&quot;,
          regions: {
              'tableBody': '#table-body'
          },
      
           showChildren: function() {
  
              this.getRegion('tableBody').show(new TableBodyView({
                  collection: this.collection,
              }));
          },
          render: function() {        
              Backbone.Marionette.LayoutView.prototype.render.apply(this, arguments);
              this.showChildren();
              return this;
          }   
  });
  
  
  
  // ----------------------------------------------------------------
  // Below this line is normal stuff... models, templates, data, etc.
  // ----------------------------------------------------------------
  var itemData = [
      {
          row: &quot;row 1&quot;,
          items: [
              {
                  item: &quot;row 1, item 1&quot;
              },
              {
                  item: &quot;row 1, item 2&quot;
              }
          ]
      },
      {
          row: &quot;row 2&quot;,
          items: [
              {
                  item: &quot;row 2, item 1&quot;
              },
              {
                  item: &quot;row 2, item 2&quot;
              }
          ]
      }
  ];
      
  
  var Item = Backbone.Model.extend({});
  
  var ItemCollection = Backbone.Collection.extend({
      model: Item
  });
  
  var itemCollection = new ItemCollection(itemData);
  
  var layoutView = new LayoutView({
      collection: itemCollection
  });
  
  layoutView.render();
  
  $(&quot;#table&quot;).html(layoutView.el);
  </code></pre>
  <p>The jsfiddle is <a href="http://jsfiddle.net/9ch569p2/6/" rel="nofollow noreferrer">here</a>. As you can see, the table structure is incorrect because Backbone automatically wraps the <code>TableBodyView</code> in a <code>div</code> wrapper. This then breaks the table HTML. I know on can remove the <code>div</code> from the DOM after render, but I was hoping for a nicer solution...</p>
  <p><strong>EDIT</strong></p>
  <p>Just to make it clearer, in the TableDataView and TableRowView, i specify <code>tagName</code> to be <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> respectively. If I was to do the same in TableBodyView i.e. specify the <code>tagName</code> as <code>&lt;tbody&gt;</code>, I'm still left with the same problem, as i'll have to put a <code>&lt;div id=&quot;table-body&quot;&gt;</code> in the table template, which again means the table HTML will still be incorrect...</p>