こんばんは。ゆんぼうです。
今回は、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-list-item">
<%= label.name %>
<input type="button" class="cls_button_delete" value="<%= label.deleteButton %>">
</script>
<script type="text/template" id="template-user-register">
<label for="id_input_name"><%= label.name %></label>
<input id="id_input_name" type="text">
<br>
<input id="id_button_regist" type="button" value="<%= label.registButton %>">
<hr>
</script>
テンプレートID template-user-list-item はリスト1件分のテンプレート、
template-user-register が登録画面のテンプレートです。
main.js に下記の内容を記述します。
var UserListView = Backbone.View.extend({
name : 'UserListView',
tagName : 'ul',
initialize : function(args) {
this.collection = args.collection;
this.listenTo(this.collection, 'add', this.onAdd);
this.listenTo(this.collection, 'remove', this.onRemove);
},
render : function() {
this.$el.html('');
_.each(this.collection.models, function(model) {
this.$el.append((new UserListItemView({
'model' : model,
'collection' : this.collection
})).render().el);
}, this);
return this;
},
onAdd : function() {
console.log(this.name + '#onAdd');
this.render();
},
onRemove : function() { // (3)
console.log(this.name + '#onRemove');
this.render();
}
});
var UserListItemView = Backbone.View.extend({
name : 'UserListItemView',
tagName : 'li',
events : {
'click .cls_button_delete' : 'onClickDeleteButton'
},
initialize : function(args) {
this.model = args.model;
this.collection = args.collection;
this.compiledTemplate = _.template($('#template-user-list-item').text());
},
render : function() {
var templateData = {
'label' : {
'name' : this.model.get('name'),
'deleteButton' : '削除'
}
};
this.$el.append(this.compiledTemplate(templateData)); // (1)
return this;
},
onClickDeleteButton : function() {
console.log(this.name + '#onClickDeleteButton');
this.collection.remove(this.model); // (2)
}
});
(1) リスト1件分を表す UserListItemView に削除ボタンのテンプレートを追加します。
(2) 削除ボタンを押下したときに、collection.remove で collection から該当の model を削除します。
(3) collection には既に model が削除されています。remove イベントが発火されたときに、render 関数を呼び出しリストを再描画します。その結果、削除された後のリストが表示されます。
■チェックボックスリストと削除ボタン
【デモはこちら】
【ソースファイルはこちら】
先ほどは、リスト毎に削除しておりましたが、
ここでは、チェックボックスにチェックがあるリストを纏めて削除するものを作成します。
index.html のhead に下記の内容を記述します。
<script type="text/template" id="template-user-list">
<input id="id_button_delete" type="button" value="<%= label.deleteButton %>">
<hr>
<ul id="id_ul_user_list"></ul>
</script>
<script type="text/template" id="template-user-list-item">
<input class="cls_checkbox" type="checkbox"> <%= label.name %>
</script>
<script type="text/template" id="template-user-register">
<label for="id_input_name"><%= label.name %></label>
<input id="id_input_name" type="text">
<br>
<input id="id_button_regist" type="button" value="<%= label.registButton %>">
<hr>
</script>
テンプレートID template-user-list はリスト全体のテンプレートです。
main.js に下記の内容を記述します。
var UserModel = Backbone.Model.extend({
defaults : {
'name' : ''
},
isSelected : false, // (2)
validate : function(attribuite) {
if (_.isEmpty(attribuite.name)) {
return "名前が入力されていません";
}
}
});
var UserCollection = Backbone.Collection.extend({
model : UserModel,
removeSelectedModel : function() { // (5)
var selectedCollection = this.models.filter(function(model) {
return model.isSelected;
});
this.remove(selectedCollection);
}
});
var UserListView = Backbone.View.extend({
name : 'UserListView',
events : {
'click #id_button_delete' : 'onClickDeleteButton'
},
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-list').text());
},
render : function() {
var templateData = {
'label' : {
'deleteButton' : '削除'
}
};
this.$el.append(this.compiledTemplate(templateData)) // (1)
return this;
},
renderItem : function() {
this.$el.find('#id_ul_user_list').html('');
_.each(this.collection.models, function(model) {
this.$el.find('#id_ul_user_list').append((new UserListItemView({
'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(); // (6)
},
onClickDeleteButton : function() {
console.log(this.name + '#onClickDeleteButton');
this.collection.removeSelectedModel(); // (4)
}
});
var UserListItemView = Backbone.View.extend({
name : 'UserListItemView',
tagName : 'li',
events : {
'click .cls_checkbox' : 'onClickCheckBox'
},
initialize : function(args) {
this.model = args.model;
this.collection = args.collection;
this.compiledTemplate = _.template($('#template-user-list-item').text());
},
render : function() {
var templateData = {
'label' : {
'name' : this.model.get('name')
}
};
this.$el.append(this.compiledTemplate(templateData));
return this;
},
onClickCheckBox : function(event) {
console.log(this.name + '#onClickCheckBox');
this.model.isSelected = event.target.checked; // (3)
}
});
(1) リスト全体を表す UserListView に削除ボタンのテンプレートを追加します。
(2) model に isSelected プロパティを追加します。
(3) チェックボックスをON/OFFすると、model の isSelected にチェック状態を代入します。
(4) 削除ボタンを押下すると、collection の removeSelectedModel 関数を実行します。
(5) isSelected=true である model を削除します。
(6) remove イベントが発火されたときに、render 関数を呼び出しリストを再描画します。
以上です。