通過backbone.js創建具有多個單元格的行

Question

我有一個相當簡單的骨幹視圖，它在通過_.each函數遍歷集合中的每個項目時呈現標記。

var SingleView = Backbone.View.extend({ 
    tagName:td, 
    //other stuff 
}); 

我有收集視圖以及

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

}); 

模板

然後：

<table class = "collection"> 
<!-- variables to render as html --> 
</table> 

什麼我希望做的是包裹在項目的給定數目表格行或<tr></tr>。獲得一個單元/行很容易。我試圖讓每行有2或3個或者多個單元格。我試過Jquery wrap功能，我猜我需要某種模塊化的部門，但我有點卡住了。我也是Backbone的新手，這是另一個障礙。

澄清 - 集合中的單個項目應該在每個<td>中，並且我試圖在每行中放置> 1 <td>。

Answer 1

我試圖創建一個工作示例儘可能靠近你的解釋成爲可能。它將一個集合呈現爲表單元格，我認爲你可以從那裏開始。

基本上，您不應該手動將td標記爲tr標記。根據數據流量分別創建TrView和TdView的實例。附加tr至table和td至tr。

而且你可能想看看的CollectionView在木偶實施： http://marionettejs.com/docs/v2.4.3/marionette.collectionview.html

例子＃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>

例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

這樣的事情？

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

你可以像下面這樣。我將硬編碼爲3作爲行數。如有必要，您可以通過將其傳遞給視圖來使用可變數字。

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>