こんばんは。ゆんぼうです。
今回は、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/
■ラジオボタンのテーブル
【デモはこちら】
【ソースファイルはこちら】
ラジオボタン付きのテーブルと登録・削除ボタンを作成します。
名前のテキストボックスに入力して、登録ボタンを押下すると、
テーブルにラジオボタンと名前が追加されます。
ラジオボタンを選択して、削除ボタンを押下すると、そのテーブルデータが削除されます。
index.html のhead に下記の内容を記述します。
<script type="text/template" id="template-user-table-item">
<th>
<input class="cls_radio_button" type="radio" name="item">
</th>
<td><%= data.name %></td>
</script>
テーブルデータ1件分のテンプレート template-user-table-item を作成します。
ラジオボタンのスタイルクラス名は cls_radio_button と定義します。
main.js に下記の内容を記述します。
var UserCollection = Backbone.Collection.extend({
model : UserModel,
removeSelectedModel : function() {
this.remove(this.selectedModel); // (5)
},
selectedModel : null
});
var UserTableView = Backbone.View.extend({
name : 'UserTableView',
events : {
'click #id_button_delete' : 'onClickDeleteButton' // (3)
},
initialize : function(args) {
this.collection = args.collection;
this.listenTo(this.collection, 'add', this.onAdd);
this.listenTo(this.collection, 'remove', this.onRemove);
this.compiledTemplate = _.template($('#template-user-table').text());
},
render : function() {
var tempData = {
'header' : {
'name' : '名前'
},
'label' : {
'deleteButton' : '削除'
}
};
this.$el.append(this.compiledTemplate(tempData));
return this;
},
renderItem : function() {
this.$el.find('#id_tbody').html('');
_.each(this.collection.models, function(model) {
this.$el.find('#id_tbody').append((new UserTableItemView({
'model' : model,
'collection' : this.collection
})).render().el);
}, this);
},
onAdd : function() {
console.log(this.name + '#onAdd');
this.renderItem();
},
onRemove : function() {
console.log(this.name + '#onRemove');
this.renderItem();
},
onClickDeleteButton : function(event) {
console.log(this.name + '#onClickDeleteButton');
this.collection.removeSelectedModel(); // (4)
}
});
var UserTableItemView = Backbone.View.extend({
name : 'UserTableItemView',
tagName : 'tr',
events : {
'click .cls_radio_button' : 'onClickRadioButton' // (1)
},
initialize : function(args) {
this.model = args.model;
this.collection = args.collection;
this.compiledTemplate = _.template($('#template-user-table-item').text());
},
render : function() {
var templateData = {
'data' : this.model.toJSON()
};
this.$el.append(this.compiledTemplate(templateData));
return this;
},
onClickRadioButton : function(event) {
console.log(this.name + '#onClickRadioButton:' + event.target.checked);
this.collection.selectedModel = this.model; // (2)
}
});
(1) ラジオボタンのクリックイベントを監視します。
(2) ラジオボタンを押下すると、コレクションのプロパティ selectedModel にモデルを設定します。押下される度に、押下対象のモデルを設定します。
(3) 削除ボタンのクリックイベントを監視します。
(4) 削除ボタンを押下すると、コレクションの removeSelectedModel 関数を呼びます。
(5) コレクションの remove 関数で、selectedModel に設定されているモデルを削除します。
■ラジオボタンのテーブル (ソート・複数のヘッダー)
先ほどのラジオボタンのテーブルに
複数のヘッダーとソート機能を追加します。
しかし、そのまま追加すると、ソートの再描画時にラジオボタンが消去されてしまうため、
再描画時に、ラジオボタンの表示判定を行います。
【デモはこちら】
【ソースファイルはこちら】
main.js に下記の内容を記述します。
var UserCollection = Backbone.Collection.extend({
model : UserModel,
sortAttribute : '',
sortDirection : 1,
initialize : function() {
var that = this;
this.sortComparators = {
'name' : that.comparatorString,
'age' : that.comparatorInteger,
'gender' : that.comparatorString,
'blood' : that.comparatorString,
'mailAddress' : that.comparatorString
}
},
sortToggle : function(attribute) {
if (this.sortAttribute == attribute) {
this.sortDirection *= -1;
} else {
this.sortDirection = 1;
}
this.sortAttribute = attribute;
this.comparator = this.sortComparators[attribute];
this.sort();
},
comparatorString : function(a, b) {
var a = a.get(this.sortAttribute), b = b.get(this.sortAttribute);
if (a == b) {
return 0;
}
if (this.sortDirection == 1) {
return b < a ? 1 : -1;
} else {
return a < b ? 1 : -1;
}
},
comparatorInteger : function(model) {
return model.get(this.sortAttribute) * this.sortDirection;
},
removeSelectedModel : function() {
this.remove(this.selectedModel);
},
selectModel : function(model) {
_.each(this.models, function(model) { // (2)
model.isSelected = false;
}, this);
model.isSelected = true;
this.selectedModel = model;
}
});
var UserTableItemView = Backbone.View.extend({
name : 'UserTableItemView',
tagName : 'tr',
events : {
'click .cls_radio_button' : 'onClickRadioButton'
},
initialize : function(args) {
this.model = args.model;
this.collection = args.collection;
this.compiledTemplate = _.template($('#template-user-table-item').text());
},
render : function() {
var templateData = {
'data' : this.model.toJSON()
};
this.$el.append(this.compiledTemplate(templateData));
if (this.model.isSelected) { // (3)
this.$el.find('.cls_checkbox').prop('checked', true)
}
return this;
},
onClickRadioButton: function(event) {
console.log(this.name + '#onClickRadioButton:' + event.target.checked);
this.collection.selectModel(this.model); // (1)
}
});
(1) ラジオボタンを押下すると、モデルを引数にして、コレクションの selectModel 関数を呼び出します。
(2) モデルの選択フラグ isSelected を全て false にしてから、現在選択されているモデルの isSelected を true にします。また、selectedModel にモデルを設定します。
(3) テーブルデータの描画時に、モデルの isSelected を判定して、選択中であれば、ラジオボタンにチェックを入れます。
以上です。
□過去の記事
Backbone.js入門その11｢ソートテーブルを作る｣
Backbone.js入門その10｢テーブルと登録ボタンを作る｣
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つの要素を作る｣