Marionette-Backbone 如何制作具有动态行和列的网格 table headers

Question

我正在尝试使用 marionette 创建一个 table 具有动态行数和列数且 headers 的网格。

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

所以有

列 = ['breakfast'、'lunch'、'dinner']

行数 = ['carbs'、'proteins'、'fats']

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

我已经制作了列和行的视图，但我完全不知道如何将它们放入 table，然后如何添加复选框视图。

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

这个答案有两个部分。首先，我建议您使用带有 CollectionViews 的 LayoutView，因为您不需要集合本身的模板（不过您仍然会使用 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 更改为 Row 中的 tr ] 看法。（注意：您将要删除 #food-col-item 中的 <th> 标签，Backbone 将为您生成它们。）

正在 `Row` 视图中生成动态列

现在有趣的部分来了。我们将使用 templateHelpers 在您的 Row 视图中创建复选标记行。如果您查看 docs，templateHelpers 是一个散列，可让您在呈现之前将数据添加到模板。 "data" 或 JavaScript 对象可以是函数（因为函数是 JavaScript 中的第一个 class 对象）。因此，我们将使用 templateHelpers 传递我们需要复选标记的食物列，并将一个函数组合在一起，该函数将食物列作为参数，并将 return对于那些复选标记列，使用 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>

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

Marionette-Backbone 如何制作具有动态行和列的网格 table headers

Marionette-Backbone how do I make a grid table with a dynamic row and column headers

javascript

backbone.js

marionette

加载你的`LayoutView`

正在 `Row` 视图中生成动态列

Marionette-Backbone 如何制作具有动态行和列的网格 table headers

Marionette-Backbone how do I make a grid table with a dynamic row and column headers

javascript

backbone.js

marionette

加载你的LayoutView

正在 Row 视图中生成动态列

加载你的`LayoutView`

正在 `Row` 视图中生成动态列