Backbone.js入門その7｢リストと登録ボタンを作る｣

こんばんは。ゆんぼうです。

今回は、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関数が実行され、アラートが表示されます。

以上です。