バックボーンを使用してサブビューを作成する（別のテーブルの中のテーブル）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' } 
     ]); 

ノーマルビュー：テーブルビューを使用して、これを達成。その後、

私たちは、グループ化を行うことができ、アンダースコアを使用して

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 

以下のような新しいビューとしてレンダリングするが、その後、私は、そのオブジェクトをレンダリングするのに苦労していた場所でグループ化したいコードに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 

を参照してください。上記のビュー

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

は、私に必要な結果を与えるオブジェクトを与えています。ユーザーの入力を使用して2つの異なるビューの

Answer 1

更新フィドル

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>