Marionette CollectionView, завернутый в div

Question

Я строю html-таблицы динамически в зависимости от данных с помощью Marionette CollectionViews и ItemViews. Структура данных выглядит так:

var itemData = [ 
{ 
    row: "row 1", 
    items: [ 
     { 
      item: "row 1, item 1" 
     }, 
     { 
      item: "row 1, item 2" 
     } 
    ] 
}, 
{ 
    row: "row 2", 
    items: [ 
     { 
      item: "row 2, item 1" 
     }, 
     { 
      item: "row 2, item 2" 
     } 
    ] 
} 

];

Таким образом, у меня есть представление в виде таблицы для таблицы, представление коллекции для строк, другой вид коллекции (дочерний элемент представления родительской коллекции) и представление элемента для ячеек таблицы. Мой код:

// A Grid Row 
var TableDataView = Backbone.Marionette.ItemView.extend({ 
    template: "#data-template", 
    tagName: "td", 

    initialize: function(){ 
     console.log('in TableDataView and this.model is '); 
     console.log(this.model); 
    } 
}); 

// The grid view 
var TableRowView = Backbone.Marionette.CollectionView.extend({ 
    tagName: "tr", 

    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: "#table-template", 
     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: "row 1", 
     items: [ 
      { 
       item: "row 1, item 1" 
      }, 
      { 
       item: "row 1, item 2" 
      } 
     ] 
    }, 
    { 
     row: "row 2", 
     items: [ 
      { 
       item: "row 2, item 1" 
      }, 
      { 
       item: "row 2, item 2" 
      } 
     ] 
    } 
]; 


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(); 

$("#table").html(layoutView.el); 

jsfiddle является here. Как вы можете видеть, структура таблицы неверна, потому что Backbone автоматически обертывает TableBodyView в обертке div. Затем это разбивает таблицу HTML. Я знаю о том, может удалить div из DOM после рендеринга, но я надеялся на более хорошее решение ...

EDIT

Просто, чтобы сделать его более четким, в TableDataView и TableRowView, я указать tagName должно быть <tr> и <td> соответственно. Если бы я должен был сделать то же самое в TableBodyView, то укажите tagName как <tbody>, мне по-прежнему остается та же проблема, что и в шаблоне таблицы, я должен поместить <div id="table-body">, что опять же означает, что HTML-таблица будет по-прежнему ошибочной ...

Answer 1

Как предложил @ivarni, я изменил вашу скрипку, чтобы использовать CompositeView вместо LayoutView. Согласно документам Marionette, комбинированное представление может использоваться «для сценариев, в которых коллекция должна отображаться в шаблоне обертки». Шаблон обертки в этом случае является таблицей/телом.

var CompositeView = Backbone.Marionette.CompositeView.extend({ 
    template: "#table-template", 
    childViewContainer: '#table-body', 
    childView: TableRowView, 
    childViewOptions: function(model, index) { 
     return { 
      collection: new Backbone.Collection(model.get('items')) 
     }; 
    } 
}); 

А вот рабочая скрипку: http://jsfiddle.net/bgyfpe7p/