javascript - Marionette-Backbone 如何制作带有动态行和列标题的网格表

Question

我正在尝试使用 Marionette 制作一个表格网格，其中包含动态行数和列数以及标题。

我想要一个如下所示的网格:http://jsfiddle.net/zaphod013/c3w61gf6/

所以有

列 = ['早餐', '午餐', '晚餐']

行 = ['碳水化合物', '蛋白质', '脂肪']

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

我已经制作了列和行的 View ，但我完全不知道如何将它们放入表中，以及如何添加复选框 View 。

我的代码在 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>

脚本:

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 View 知道您需要多少复选标记列(如您所见，这将是微不足道的)，我们必须在 Row 中创建这些列查看。

加载您的 LayoutView

你的 FoodLayout View 和模板是完美的。你奠定了基础。你需要填充它的是两个 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> 中的 #food-col-item 标签，Backbone 将为您生成它们。)

在 Row 中生成动态列查看

现在有趣的部分来了。我们将使用 templateHelpers在你的 Row 中打勾意见。如果你看看 docs , templateHelpers是一个散列，让您在呈现之前将数据添加到模板。 “数据”或 JavaScript 对象可以是函数(因为函数是 JavaScript 中的一流对象)。所以，我们将使用 templateHelpers传递我们需要复选标记的食物列，并将一个函数组合在一起，该函数将食物列作为参数，并将返回这些复选标记列的 html。

把这个 templateHelpers在你的属性(property) 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 .有多种方法可以将其放入其中。我刚用过 this.foodColumns作为虚拟占位符。