前回までは、登録ボタンを押すと、リストが追加されていきました。
今回は、Backbone.jsでテーブルを作成します。
今回使用する環境は下記の通りです。
Webブラウザ
・Mozilla Firefox (v34.05) https://www.mozilla.org/ja/firefox/new/
・FireBug (v2.0.7) https://addons.mozilla.org/ja/firefox/addon/firebug/
JavaScriptライブラリ
・Backbone.js (v1.1.2) http://backbonejs.org/
・Underscore.js (v1.7.0) http://underscorejs.org/
・jQuery (v2.1.1) http://jquery.com/
■ヘッダーが1つのテーブル
【デモはこちら】
【ソースファイルはこちら】
｢名前｣ヘッダーを持つテーブルと登録ボタンを作成します。
名前のテキストボックスに入力して、このボタンを押下すると、
テーブルに名前が追加されます。
index.html のhead に下記の内容を記述します。
<script type="text/template" id="template-user-table">
<table class="cls_table">
<thead>
<tr>
<th><%= header.name %></th>
</tr>
</thead>
<tbody id="id_tbody">
</tbody>
</table>
</script>
<script type="text/template" id="template-user-table-item">
<td><%= data.name %></td>
</script>
テーブル用のテンプレートを用意します。
テンプレートID template-user-table がテーブルのヘッダー、
template-user-table-item がテーブルのデータとなります。
main.js に下記の内容を記述します。
var UserTableView = Backbone.View.extend({
name : 'UserTableView',
initialize : function(args) {
this.collection = args.collection;
this.listenTo(this.collection, 'add', this.onAdd);
this.compiledTemplate = _.template($('#template-user-table').text());
},
render : function() {
var tempData = {
'header' : {
'name' : '名前'
}
};
this.$el.append(this.compiledTemplate(tempData)); // (1)
return this;
},
renderItem : function() {
this.$el.find('#id_tbody').html('');
_.each(this.collection.models, function(model) { // (3)
this.$el.find('#id_tbody').append((new UserTableItemView({
'model' : model
})).render().el);
}, this);
},
onAdd : function() {
console.log(this.name + '#onAdd');
this.renderItem(); // (2)
}
});
UserRegisterView は前回と同じ内容です。
今回は、テーブル全体を現す UserTableView とテーブルの1件分のデータを表す UserTableItemView を新たに作成します。
(1) UserTableView でテーブルのヘッダーを描画します。
(2)(3) 登録ボタンを押下すると、UserCollection にデータが追加され、add イベントが発火されます。onAdd 関数が呼び出され、renderItem 関数でテーブルデータを描画します。
■ヘッダーが複数のテーブル
【デモはこちら】
【ソースファイルはこちら】
先ほど作成したテーブルに
｢名前｣以外に、｢年齢｣｢性別｢血液型｣｢メールアドレス｣のヘッダーを追加します。
index.html のhead に下記の内容を記述します。
<script type="text/template" id="template-user-table">
<table class="cls_table">
<thead>
<tr>
<th><%= header.name %></th>
<th><%= header.age %></th>
<th><%= header.gender %></th>
<th><%= header.blood %></th>
<th><%= header.mailAddress %></th>
</tr>
</thead>
<tbody id="id_tbody">
</tbody>
</table>
</script>
<script type="text/template" id="template-user-table-item">
<td><%= data.name %></td>
<td><%= data.age %></td>
<td><%= data.gender %></td>
<td><%= data.blood %></td>
<td><%= data.mailAddress %></td>
</script>
テンプレートにそれぞれ｢年齢｣｢性別｢血液型｣｢メールアドレス｣を追加します。
また、UserModel にも同様に追加します。
以上です。
□過去の記事
Backbone.js入門その9｢リストと詳細ボタンを作る｣
Backbone.js入門その8｢リストと削除ボタンを作る｣
Backbone.js入門その7｢リストと登録ボタンを作る｣
Backbone.js入門その6｢ModelとCollection｣
Backbone.js入門その5｢静的HTMLでBackbone.Viewを作る｣
Backbone.js入門その4｢SuperViewとSubViewのアクセスを作成する｣
Backbone.js入門その3｢Backbone.ViewでSubViewを作る｣
Backbone.js入門その2｢Backbone.Viewで複数の要素を作る｣
Backbone.js入門その1｢Backbone.Viewで1つの要素を作る｣