Javascript 提线木偶收集视图包裹在div中

我正在使用木偶收集视图和项目视图根据数据动态构建html表。数据的结构如下所示：

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

JSFIDLE是。如您所见，表结构不正确，因为主干自动将

TableBodyView

包装在

div

包装中。然后，这会破坏HTML表。我知道on可以在渲染后从DOM中删除

div

，但我希望有更好的解决方案

编辑

---

为了更清楚，在TableDataView和TableRowView中，我分别将标记名

指定为
和
。如果我要在TableBodyView中执行相同的操作，即将标记名
指定为
，我仍然会遇到同样的问题，因为我必须在表格模板中添加一个
，这同样意味着表格HTML仍然是不正确的…
，正如@ivarni所建议的那样，我修改了你的小提琴，用合成视图代替布局视图。根据木偶文档，复合视图可以“用于需要在包装器模板中呈现集合的场景”。在这种情况下，包装器模板是表/tbody

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'))
        };
    }
});

这是一个有用的小提琴：
您在TableDataView和TableRowView中都使用了
标记名
，以覆盖默认的
div
元素，在TableBodyView中使用它不起作用吗？它会起作用。但是，在表模板中，我会给出什么标记作为区域呢？我想我在这里要做的是将LayoutView和TableBodyView交换为CompositeView，并将tbody用作childViewContainer。我现在没有时间准备一个例子（有点心不在焉，对不起），但是试着看看文档，看看你是否能解决一些问题。如果不是的话，我明天也许可以看一看。实际上，中使用的示例恰好是使用
childViewContainer
作为
tbody
，所以我在小提琴中重复这一点没有什么意义。我认为没有更好的方法来摆脱额外的
div
。