Javascript 木偶主干如何制作具有动态行和列标题的网格表

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

我想要一个如下所示的网格：

所以有

列=[“早餐”、“午餐”、“晚餐”]

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

网格的其余部分是复选框

我已经为列和行创建了视图，但是我完全不知道如何将它们放入表中，然后如何添加复选框视图

我的密码是

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>

我真的很感激你给我一些建议，告诉我该怎么做

---

感谢您通读。

这个答案有两个部分。首先，我建议您将

LayoutView

与

collectionview

一起使用，因为集合本身不需要模板（不过，您仍将使用

ItemView

模板）。其次，您必须让您的

行

视图知道您需要多少复选标记列（您将看到这一点），我们必须在

行

视图中创建这些列

加载您的

布局视图

您的

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
});

请注意，我将您的

组合视图更改为
集合视图
，并将
项目视图
中的
标记名
更改为
行
视图的
tr
。（注意：您将要删除
#food col item
中的
标记，主干将为您生成这些标记。）

在
行中生成动态列
现在有趣的部分来了。我们将使用
templateHelpers
在
行
视图中对行进行复选标记。如果您看一下，
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;
    }
  }
} 

您需要注意的是，您需要向
FoodManager.FoodLayout
提供用于
colcolcolcollection
的食物列，以便可以填充
this.templateHelpers.foods
。有很多方法可以把它放进去。我刚刚使用了
this.foodColumns
作为虚拟占位符。
您所说的“动态行数和列数”是什么意思？你所描述的对我来说似乎不是动态的。动态意味着每次呈现表时可能会有不同的数字，具体取决于加载的数据。据我所知，您想要的表总是有三列三行。但是如果您看到JS代码，行和列是集合，因此是动态的。作为建议，在另一个已经具备坚实基础的框架之上构建。我对BackgridJS做过类似的事情，有很好的经验：。列被描述为模型属性；行只是模型。单元的渲染非常灵活。Backgrid的核心组件是可扩展的，甚至是可替换的。听起来你要找的是一个包含多个集合的CompositeView。不幸的是，此时木偶图库中没有该选项。您的HTML不会验证，但您可以使用LayoutView执行您的建议。如果您需要帮助，请告诉我。@seebickit，我确实需要一些布局方面的帮助。我无法超越这个阶段。我想我遗漏了一些重要的概念。非常感谢你的详细解释。我可以让它工作。我所做的唯一更改是在rowCollectionView中传递foodColumns，而不是在布局中传递foodColumns。（次要）
serializeData
做了
templateHelpers
试图做的一个主要区别，
this
inside
serializeData
是视图，而
this
inside templateHelpers`是与
serializeData
混合的
数据。如果你看一下小提琴，我删除了
templateHelpers
中的
food
属性，并留下了覆盖的
serializedData
。3.（小调）我在你的
ColView
中添加了一个
tr
。这将替换视图的边界
div
，让我们引导它完成工作。（major）不幸的是，在
RowView
中，边界
div
没有简单的解决方法。可以将行直接附加到区域。我想出了一个解决办法，但我还没有对它进行广泛的测试。这里有一个指向实现它的答案的链接：。这里有一个链接到一个更新的小提琴，它包含了前2项：我应用了3项。请仔细研究，这里有一些主要的变化，尤其是它使用了当前的Mn版本（2.4.0）。这将
itemView
更改为
childView
，
Layout
更改为
LayoutView
。请看这里的小提琴：
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;
    }
  }
} 

<script id="food-row-item" type="text/template">
    <td><%= row %></td><% addColumns(foods) %>
</script>