使用主干JS创建子视图（在另一个表内的表格）

Question

尝试在具有主干的表格内创建表格，但无法找到方法。任何人都可以通过一个例子来帮助我实现这个目标吗？

我的收藏：

this.collection = new Backbone.Collection([ 
      { first: 'John', last: 'Doe', desig: 'E1', location: 'C' }, 
      { first: 'Mary', last: 'Jane', desig: 'E3', location: 'C' }, 
      { first: 'Billy', last: 'Bob', desig: 'E2', location: 'C' }, 
      { first: 'Dexter', last: 'Morgan', desig: 'E1', location: 'P' }, 
      { first: 'Walter', last: 'White', desig: 'E2', location: 'P' }, 
      { first: 'Billy', last: 'Bobby', desig: 'E1', location: 'B' } 
     ]); 

普通视图：使用表格视图实现了这个。参照那么代码here

first last desig location 
---------------------------------- 
Billy Bobby E1  B 
Walter White E2  P 
Dexter Morgan E1  P 
Billy Bob  E2  C 
Marry Jane  E3  C 
John  Doe  E1  C 

按位置要群想呈​​现像下面

location first last desig  
---------------------------------- 
C   Billy Bob  E2 
      Marry Jane E3 
      John  Doe  E1 
P   Walter White E2 
      Dexter Morgan E1 
B   Billy Bobby E1 

使用下划线我们可以做分组但在那之后，我努力呈现的对象作为新的视图以上视图

_.groupby(this.collection, "location"); 

给我一个对象，它具有所需的结果。

Answer 1

更新拨弄利用用户输入2层不同的观点

jsfiddle.net/WebDev81/ddbf9ckv/10

让我知道有人有更好的方法来实现这一目标。

Answer 2

表中的每一行都应该在Backbone.View中表示。 您想要的分组主要是标准HTML表格的rowspan功能。

看到的片段：

var collection = new Backbone.Collection([{ 
 
    first: 'John', 
 
    last: 'Doe', 
 
    desig: 'E1', 
 
    location: 'Chennai' 
 
}, { 
 
    first: 'Mary', 
 
    last: 'Jane', 
 
    desig: 'E3', 
 
    location: 'Chennai' 
 
}, { 
 
    first: 'Billy', 
 
    last: 'Bob', 
 
    desig: 'E2', 
 
    location: 'Chennai' 
 
}, { 
 
    first: 'Dexter', 
 
    last: 'Morgan', 
 
    desig: 'E1', 
 
    location: 'Pune' 
 
}, { 
 
    first: 'Walter', 
 
    last: 'White', 
 
    desig: 'E2', 
 
    location: 'Pune' 
 
}, { 
 
    first: 'Billy', 
 
    last: 'Bobby', 
 
    desig: 'E1', 
 
    location: 'Bangalore' 
 
}]); 
 

 
var GroupRowView = Backbone.View.extend({ 
 
    tagName: 'tr', 
 
    initialize: function(options) { 
 
    this.groupBy = options.groupBy; 
 
    this.index = options.index; 
 
    this.total = options.total; 
 
    }, 
 
    render: function() { 
 
    this.$el.empty(); 
 
    if (this.index == 0) { 
 
     this.$el.append('<td rowspan="' + this.total + '">' + this.model.get(this.groupBy) + '</td>'); 
 
    } 
 
    _.each(this.model.omit(this.groupBy), function(value, key) { 
 
     this.$el.append('<td>' + value + '</td>'); 
 
    }, this); 
 
    return this; 
 
    } 
 
}); 
 

 
var SimpleRowView = Backbone.View.extend({ 
 
    tagName: 'tr', 
 
    render: function() { 
 
    this.$el.empty(); 
 
    //this.$el.append('<td>' + this.model.get('location') + '</td>') 
 
    _.each(this.model.values(), function(value) { 
 
     this.$el.append('<td>' + value + '</td>'); 
 
    }, this); 
 
    return this; 
 
    } 
 
}) 
 

 
var TableView = Backbone.View.extend({ 
 
    tagName: 'table', 
 
    render: function() { 
 
    /*var self = this; 
 
    self.$el.empty(); 
 
    self.collection.each(function(rowModel) { 
 
     self.$el.append(_.template('<tr><td><%= location %></td><td><%= first %></td><td><%= last %></td><td><%= desig %></td></tr>')(rowModel.attributes)) 
 
    });*/ 
 
    var self = this; 
 
    self.$el.empty(); 
 
    self.collection.each(function(model) { 
 
     var row = new SimpleRowView({ 
 
     model: model 
 
     }); 
 
     self.$el.append(row.render().el); 
 
    }); 
 
    return this; 
 
    }, 
 
    groupCollection: function() { 
 
    var self = this; 
 
    var groups = self.collection.groupBy('location'); 
 
    self.$el.empty(); 
 
    _.each(groups, function(group) { 
 
     var length = group.length; 
 
     _.each(group, function(model, i) { 
 
     var row = new GroupRowView({ 
 
      model: model, 
 
      groupBy: 'location', 
 
      index: i, 
 
      total: length 
 
     }); 
 
     self.$el.append(row.render().el); 
 
     }) 
 
    }) 
 
    } 
 
}); 
 
var table = new TableView({ 
 
    collection: collection 
 
}); 
 

 
$('#table-container').append(table.render().el); 
 
$('#sortBtn').click(function(e) { 
 
    table.groupCollection(); 
 
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 

 

 
<p>What the table should be:</p> 
 
<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Location</th> 
 
     <th>First</th> 
 
     <th>Last</th> 
 
     <th>Desig</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="3">C</td> 
 
     <td>Billy</td> 
 
     <td>Bob</td> 
 
     <td>E2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Marry</td> 
 
     <td>Jane</td> 
 
     <td>E3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>E1</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2">P</td> 
 
     <td>Walter</td> 
 
     <td>White</td> 
 
     <td>E2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Dexter</td> 
 
     <td>Morgan</td> 
 
     <td>E1</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="1">B</td> 
 
     <td>Billy</td> 
 
     <td>Bobby</td> 
 
     <td>E1</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<p>What the resulting table is:</p> 
 

 
<button id="sortBtn">Sort!</button> 
 

 
<div id="table-container"> 
 

 
</div>