create row with multiple cells via backbone.js - backbone.js

Question

I have a rather simple backbone view that renders a tag when iterating through each item in a collection via the _.each function.
var SingleView = Backbone.View.extend({
tagName:td,
//other stuff
});
I have a view for the collection as well
var CollectionView = Backbone.View.extend({
//other stuff
this.collection.each(function(model ,i) {
var item = new SingleView({model: model});
//alert(i);
//maybe in here is where I need logic to wrap a row around a <td> tag ?
$('.collection').append(item.render().$el);
});
Then in the template:
<table class = "collection">
<!-- variables to render as html -->
</table>
What I'm hoping to do is wrap a given number of items in a table row, or <tr></tr>. It's easy to get one cell/row. I'm trying to get 2 or 3 or however many cells per row that I want. I've tried the Jquery wrap feature, and I'm guessing I need some kind of modular division but I'm kind of stuck. I'm also new to Backbone which is another hurdle.
To clarify - an individual item in the collection should be in each <td>, and I'm trying to place > 1 <td> in each row.

Answer 1

I tried to create a working example as close to your explanation as possible. It renders a collection as table cells, and I think you can go from there.
Basically, you shouldn't manually wrap your td's in a tr tag. Create instances of TrView and TdView respectively, depending on the flow of your data. Append tr to table, and td to tr.
Also you might want to look at CollectionView implemented in Marionette:
http://marionettejs.com/docs/v2.4.3/marionette.collectionview.html
Example #1:
var collection = new Backbone.Collection([
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' }
]);
var TableView = Backbone.View.extend({
tagName: "table",
className: "collection",
render: function(){
var rowView = new RowView({ collection: collection });
this.$el.html( rowView.render().el );
return this;
}
});
var RowView = Backbone.View.extend({
tagName: "tr",
render: function(){
this.collection.each(this.appendItem, this);
return this;
},
appendItem: function(model){
var tdView = new TdView({ model:model });
this.$el.append( tdView.render().el );
}
});
var TdView = Backbone.View.extend({
tagName: "td",
render: function(){
this.$el.text( this.model.get('title') );
return this;
}
});
var tableView = new TableView();
tableView.render().$el.appendTo(document.body);
table {
border: 1px solid steelblue;
}
td {
border: 1px solid brown;
padding: 3px 5px;
}
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>
Example #2:
var collection = new Backbone.Collection([
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 5' },
{ title: 'Item 6' }
]);
var TableView = Backbone.View.extend({
tagName: "table",
className: "collection",
initialize: function(o){
this.maxItemsInRow = o.maxItemsInRow? o.maxItemsInRow: 3;
},
render: function(){
this.collection.each(this.addItem, this);
return this;
},
addRow: function(){
var rowView = new RowView({ collection: collection });
rowView.$el.appendTo( this.el );
this.currentRow = rowView;
this.currentRowItemsLength = 0;
},
addItem: function(model){
if( typeof this.currentRow === 'undefined') {
this.addRow();
}
this.currentRow.addItem(model);
this.currentRowItemsLength++;
if(this.currentRowItemsLength >= this.maxItemsInRow){
this.currentRow = undefined;
}
}
});
var RowView = Backbone.View.extend({
tagName: "tr",
addItem: function(model){
var tdView = new TdView({ model:model });
this.$el.append( tdView.render().el );
}
});
var TdView = Backbone.View.extend({
tagName: "td",
render: function(){
this.$el.text( this.model.get('title') );
return this;
}
});
var tableView = new TableView({ collection: collection, maxItemsInRow: 3 });
tableView.render().$el.appendTo(document.body);
table {
border: 1px solid steelblue;
}
td {
border: 1px solid brown;
padding: 3px 5px;
}
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>

Answer 2

Something like this?
http://jsfiddle.net/9mjcmgpo/
var SingleView = Backbone.View.extend({
tagName: 'tr',
template: _.template('<td><%=name%></td><td><%=age%></td><td><%=sex%></td>'),
render: function() {
this.$el.append(this.template(this.model.toJSON()))
return this
}
});
var CollectionView = Backbone.View.extend({
template: _.template('<tr><th>name</th><th>age</th><th>sex</th></tr>'),
initialize: function() {
this.$el = $('.collection');
this.el = this.$el[0];
// sudo collection
this.collection = new Backbone.Collection();
this.collection.add({'name': 'test1', 'sex': 'f', age: 21});
this.collection.add({'name': 'test2', 'sex': 'o', age: 25});
this.collection.add({'name': 'test3', 'sex': 'm', age: 26});
// hack
this.render();
},
render: function() {
this.$el.html(this.template());
this.collection.each(_.bind(function(model) {
var item = new SingleView({model: model});
this.$el.append(item.render().$el);
}, this));
return this;
}
});
new CollectionView()

Answer 3

You can do something like the following. I have hard coded 3 as the number of rows. You can use variable number by passing it to the view if necessary.
var collection = new Backbone.Collection([{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}, {
title: 'Item 5'
}]);
var TdView = Backbone.View.extend({
tagName: "td",
initialize: function() {
this.render();
},
render: function() {
this.$el.text(this.model.get('title'));
return this;
}
});
var TableView = Backbone.View.extend({
tagName: "table",
className: "collection",
initialize: function() {
this.render();
},
render: function() {
var $tr = $('<tr/>');
var count = 1;
this.collection.each(function(model, i) {
if ((i / 3) >= count) { // end of current row
this.$el.append($tr); //append current row
$tr = $('<tr/>'); // create new row
count = this.$el.find('tr').length + 1; // refresh counter
}
$tr.append(new TdView({ // append td to current row
model: model
}).el);
}, this);
this.$el.append($tr); // append final row
return this;
}
});
var tableView = new TableView({
collection: collection
});
tableView.$el.appendTo('body');
table {
border: 1px solid steelblue;
}
td {
border: 1px solid brown;
padding: 3px 5px;
}
<script src='http://code.jquery.com/jquery.js'></script>
<script src='http://underscorejs.org/underscore.js'></script>
<script src='http://backbonejs.org/backbone.js'></script>