今回は、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 %>
</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>
main.js に下記の内容を記述します。
$(function() {
var UserModel = Backbone.Model.extend({ // (1)
defaults : {
'name' : ''
}
});
var UserCollection = Backbone.Collection.extend({ // (2)
model : UserModel
});
var UserListView = Backbone.View.extend({
name : 'UserListView',
tagName : 'ul',
initialize : function(args) {
this.collection = args.collection;
this.listenTo(this.collection, 'add', this.onAdd);
},
render : function() {
this.$el.html('');
_.each(this.collection.models, function(model) {
this.$el.append((new UserListItemView({
'model' : model
})).render().el);
}, this);
return this;
},
onAdd : function() { // (5)
console.log(this.name + '#onAdd');
this.render();
}
});
var UserListItemView = Backbone.View.extend({
name : 'UserListItemView',
tagName : 'li',
initialize : function(args) {
this.model = args.model;
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;
}
});
var UserRegisterView = Backbone.View.extend({
name : 'UserRegisterView',
events : {
'click #id_button_regist' : 'onClickRegistButton'
},
initialize : function(args) {
this.collection = args.collection;
this.compiledTemplate = _.template($('#template-user-register').text());
},
render : function() {
var templateData = {
'label' : {
'name' : '名前 : ',
'registButton' : '登録'
}
};
this.$el.append(this.compiledTemplate(templateData))
return this;
},
onClickRegistButton : function() { // (4)
console.log(this.name + '#onClickRegistButton');
this.collection.add({
'name' : this.$el.find('#id_input_name').val()
});
}
});
var BaseView = Backbone.View.extend({
name : 'BaseView',
initialize : function() { // (3)
this.collection = new UserCollection();
this.userListView = new UserListView({
'collection' : this.collection
});
this.userRegisterView = new UserRegisterView({
'collection' : this.collection
});
},
render : function() {
this.$el.append(this.userRegisterView.render().el).append(this.userListView.render().el);
return this;
}
});
var baseView = new BaseView();
$('body').append(baseView.render().el);
});
(1)ユーザーの情報を表す UserModel を定義します。
(2) UserModel の配列を表す UserCollection を定義します。
(3) BaseView がページ全体のViewになります。BaseView の initialize 関数で、UserCollection のオブジェクトを生成して、それぞれのSubViewに渡しています。
(4) UserRegisterView の onClickRegistButton 関数で、登録ボタン押下時に UserCollection にデータを追加しています。
(5) UserCollection にデータが追加された場合、add イベントを発火されます。その後、 UserListView の onAdd が実行され、UserCollection のデータを元にリストが描画されます。
■バリデーション
【デモはこちら】
【ソースファイルはこちら】
リストと登録ボタンを拡張します。
Modelの validate 関数を用いて、何も入力されていない状態で
登録ボタンを押下すると、アラートが表示されるように修正します。
main.js に下記の内容を記述します。
var UserModel = Backbone.Model.extend({
defaults : {
'name' : ''
},
validate : function(attribuite) { // (1)
if (_.isEmpty(attribuite.name)) {
return "名前が入力されていません";
}
}
});
(1) UserModel に validate 関数を追加します。ここでは、name 属性が空の場合、メッセージを返します。
var UserRegisterView = Backbone.View.extend({
name : 'UserRegisterView',
events : {
'click #id_button_regist' : 'onClickRegistButton'
},
initialize : function(args) {
this.collection = args.collection;
this.listenTo(this.collection, 'invalid', this.onInvalid);
this.compiledTemplate = _.template($('#template-user-register').text());
},
render : function() {
var templateData = {
'label' : {
'name' : '名前 : ',
'registButton' : '登録'
}
};
this.$el.append(this.compiledTemplate(templateData))
return this;
},
onClickRegistButton : function() {
console.log(this.name + '#onClickRegistButton');
this.collection.add({
'name' : this.$el.find('#id_input_name').val(),
}, {
validate : true // (1)
});
},
onInvalid : function(collection, message) { // (2)
console.log(this.name + '#onInvalid');
alert(message);
}
});
(1) UserCollection にデータを追加する引数に、validate : true を追記します。この追記で、 UserCollection の add 関数を実行すると、 UserCollection の validate 関数も実行されます。
(2) UserCollection の validate 関数が実行され、検証に失敗すると、invalid イベントが発火されます。その後、UserRegisterView の onInvalid 関数が実行され、アラートが表示されます。
以上です。
□過去の記事
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つの要素を作る｣