Marionette-Backbone 如何制作具有动态行和列的网格 table headers
Marionette-Backbone how do I make a grid table with a dynamic row and column headers
我正在尝试使用 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();
我将非常感谢有关如何进行此操作的一些指示。
感谢阅读。
这个答案有两个部分。首先,我建议您使用带有 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 创建一个 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();
我将非常感谢有关如何进行此操作的一些指示。
感谢阅读。
这个答案有两个部分。首先,我建议您使用带有 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
作为虚拟占位符。