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

Question

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

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

所以有

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

rows = ['carbs', 'proteins', 'fats']

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

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

我的代码是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 视图知道您需要多少复选标记列（这将是微不足道的），我们必须在 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，并将ItemView 中的tagName 更改为tr，用于Row 视图。 （注意：您要删除#food-col-item 中的<th> 标签，Backbone 会为您生成它们。）

在Row 视图中生成动态列

现在有趣的部分来了。我们将使用templateHelpers 在您的Row 视图中创建复选标记行。如果您查看docs，templateHelpers 是一个哈希值，可让您在渲染之前向模板添加数据。 “数据”或 JavaScript 对象可以是函数（因为函数是 JavaScript 中的第一类对象）。所以，我们将使用templateHelpers 传递我们需要复选标记的食物列，并组合一个函数，该函数将食物列作为参数，并返回用于这些检查的 html -标记列。

将此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>

您需要注意的是，您需要将您用于ColCollection 的食物列提供给FoodManager.FoodLayout，以便您可以填充this.templateHelpers.foods。有多种方法可以将其放入其中。我只是使用this.foodColumns 作为虚拟占位符。