我正在尝试使用marionette创建具有动态行数和列的表格网格。
我想要一个看起来像这样的网格： http ： //jsfiddle.net/zaphod013/c3w61gf6/
所以有
列= ['早餐'，'午餐'，'晚餐']
rows = ['carbs'，'蛋白'，'脂肪']
网格的其余部分是复选框。
我已经为列和行创建了视图，但我很遗憾如何将它们放在表中，然后如何添加复选框视图。
我的代码是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();我真的很感激如何解决这个问题。
感谢您的阅读。
I am trying to make a table grid with dynamic number of rows and column with headers using marionette.
I want a grid that looks like: http://jsfiddle.net/zaphod013/c3w61gf6/
So there are
columns = ['breakfast', 'lunch', 'dinner']
rows = ['carbs', 'proteins', 'fats']
and rest of the grid is checkboxes.
I have made the Views for column and row, but I am fairly lost at how to put them in the table, and then how to add the checkbox views.
Code I have is at 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();I will really appreciate some pointers on how to go about this.
Thanks for reading through.
最满意答案
这个答案分为两部分。 首先，我建议您使用带有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更改为tr视图的tr 。 （ 注意 ：您将要删除#food-col-item中的<th>标签，Backbone会为您生成它们。）
在“ Row视图中生成动态列
现在来到这里是有趣的部分。 我们将使用templateHelpers在Row视图中创建复选标记行。 如果您查看文档 ， 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>您需要注意的是，您需要向FoodManager.FoodLayout提供您用于FoodManager.FoodLayout的食物列，以便您可以填充this.templateHelpers.foods 。 有多种方法可以在那里得到它。 我只是使用this.foodColumns作为虚拟占位符。
There are two parts to this answer. First, I recommed you use a LayoutView with CollectionViews, since you don't need a template for the collection itself (you'll still use the ItemView templates, though). Second, you'll have to let your Row view know how many check-mark columns you'll need (this will be trivial as you'll see) and we'll have to create those columns in the Row view.
Load up your LayoutView
Your FoodLayout view and template are perfect. You laid the foundation. What you need to populate it with is two CollectionView views:
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 });Note that I changed your CompositeView to CollectionView, and changed your the tagName in the ItemView to tr for the Row view. (Note: you're going to want to remove the <th> tags in #food-col-item, Backbone will generate them for you.)
Generating dynamic columns in Row view
Now here comes the fun part. We're going to use templateHelpers to make the check-mark rows in your Row views. If you'll look at the docs, templateHelpers is a hash that let's you add data to your template before rendering. That "data", or JavaScript objects, can be functions (since function are first class objects in JavaScript). So, we're going to use templateHelpers to pass the food columns we'll need check-marks for, and to put together a function that will take as a parameter the food columns, and will return with the html for those check-mark columns.
Put this templateHelpers property in your 'FoodManager.FoodLayout view:
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; } } }And your Row template will look like:
<script id="food-row-item" type="text/template"> <td><%= row %></td><% addColumns(foods) %> </script>What you need to be aware of is that you need to give the FoodManager.FoodLayout the food columns you used for ColCollection, so that you can populate this.templateHelpers.foods. There are mutliple ways to get that in there. I just used this.foodColumns as dummy placeholder.
更多推荐
发布评论