Marionette-Backbone如何使用动态行和列标题创建网格表

Question

我正在尝试使用marionette制作具有动态行数和列标题的表格。

我想要一个看起来像http://jsfiddle.net/zaphod013/c3w61gf6/

的网格

所以有

columns = [＆＃39;早餐＆＃39;，＆＃39;午餐＆＃39;，＆＃39;晚餐＆＃39;]

行= [＆＃39;碳水化合物＆＃39;蛋白质＆＃39;脂肪＆＃39;]

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

我已经为列和行创建了视图，但我对如何将它们放在表中，以及如何添加复选框视图感到很遗憾。

我的代码位于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();

我真的很感激如何解决这个问题。

感谢您阅读。

Answer 1

这个答案有两个部分。首先，我建议您使用LayoutView和CollectionViews，因为您不需要模板用于集合本身（尽管如此，您仍将使用ItemView模板）。其次，您必须让Row视图知道您需要多少个复选标记列（这将是您将看到的那么简单），我们将不得不在{{{{{{ 1}}查看。

加载Row

您的LayoutView视图和模板非常完美。你奠定了基础。您需要填充的是两个FoodLayout视图：

CollectionView

请注意，我已将您的FoodManager.ColItemView = Marionette.ItemView.extend({ template: "#food-col-item", tagName: "th", }); FoodManager.ColView = Marionette.CollectionView.extend({ itemView: FoodManager.ColItemView }); FoodManager.RowItemView = Marionette.ItemView.extend({ template: "#food-row-item", tagName: "tr", }); FoodManager.RowView = Marionette.CollectionView.extend({ itemView: FoodManager.RowItemView }); 更改为CompositeView，并将CollectionView中的tagName更改为ItemView tr视图。 （注意：您要删除Row中的<th>代码，Backbone会为您生成这些代码。）

在#food-col-item视图

中生成动态列

现在这里有趣的部分。我们将使用Row在templateHelpers次观看中制作复选标记行。如果您查看docs，Row是一个哈希值，您可以在渲染之前将数据添加到模板中。 “数据”或JavaScript对象可以是函数（因为函数是JavaScript中的第一类对象）。因此，我们将使用templateHelpers来传递我们需要检查标记的食物列，并将一个函数放在一起，该函数将作为食物列的参数，并将返回html for那些复选标记列。

将此templateHelpers媒体资源放入“templateHelpers视图：

FoodManager.FoodLayout

您的templateHelpers: function () { return { foods: function () { return this.foodColumns }, addColumns: function (foodcols) { var html = ''; for (food in foodcols) html += "<td><input type="checkbox" class=" + food + "-check"></td>"; return html; } } } 模板将如下所示：

Row

您需要注意的是，您需要提供<script id="food-row-item" type="text/template"> <td><%= row %></td><% addColumns(foods) %> </script> 用于FoodManager.FoodLayout的食物列，以便您可以填充ColCollection。有多种方法可以在那里得到它。我只是使用this.templateHelpers.foods作为虚拟占位符。