木偶骨干 如何制作带有动态行和列标题的网格表

我正在尝试使用木偶制作一个具有动态行数和带有标题的列的表格网格。

我想要一个看起来像这样的网格：http://jsfiddle.net/zaphod013/c3w61gf6/

所以有

列 = ["早餐"、"午餐"、"晚餐"]

行 = ["碳水化合物"、"蛋白质"、"脂肪"]

网格的其余部分是复选框。

我已经为列和行制作了视图，但我对如何将它们放入表中以及如何添加复选框视图感到相当迷茫。

我拥有的代码在 http://jsfiddle.net/zaphod013/qkctrLxn/

html:

<div id="main-region"></div>
<script id="food-table" type="text/template">
    <thead id="column-id">
    </thead>
    <tbody id="row-id">
    </tbody>
</script>
<script id="food-col-item" type="text/template">
    <th><%= col %></th>
</script>
<script id="food-row-item" type="text/template">
    <td><%= row %></td>
</script>

script:

FoodManager = new Backbone.Marionette.Application();
FoodManager.addRegions({
    mainRegion: "#main-region",
});
FoodManager.FoodLayout = Backbone.Marionette.Layout.extend({
    template: "#food-table",
    regions: {
       colRegion:"#column-id",
       rowRegion:"#row-id"
    }
});
FoodManager.Col = Backbone.Model.extend({});
FoodManager.ColCollection = Backbone.Collection.extend({
                                    model: FoodManager.Col
                                });
FoodManager.Row = Backbone.Model.extend({});
FoodManager.RowCollection = Backbone.Collection.extend({
                                    model: FoodManager.Row
                                });
FoodManager.ColItemView = Marionette.ItemView.extend({
    template: "#food-col-item",
    tagName: "th",
});
FoodManager.ColView = Marionette.CompositeView.extend({
    template: "#food-table",
    tagName: "thead",
    itemView: FoodManager.ColItemView
});
FoodManager.RowItemView = Marionette.ItemView.extend({
    template: "#food-row-item",
    tagName: "th",
});
FoodManager.RowView = Marionette.CompositeView.extend({
    template: "#food-table",
    tagName: "table",
    itemView: FoodManager.RowItemView
});
FoodManager.on("initialize:after", function(){
    var columns = new FoodManager.ColCollection([
                    {col: 'Breakfast'},
                    {col: 'Lunch'},
                    {col: 'Dinner'}
            ]);
    var rows = new FoodManager.RowCollection([
                    {row: 'Carbs'},
                    {row: 'Protein'},
                    {row: 'Fats'}
            ]);
    var colListView = new FoodManager.ColView({
                            collection: columns
                        });
    var rowListView = new FoodManager.RowView({
                            collection: rows
                        });
    var foodLayout = new FoodManager.FoodLayout();    
    foodLayout.render();
    FoodManager.colRegion.show(colListView);
    FoodManager.rowRegion.show(rowListView);
    FoodManager.mainRegion.show(foodLayout);
});
 FoodManager.start();

我将非常感谢有关如何执行此操作的一些指示。

感谢您通读。