Backbone.js入門その4｢SuperViewとSubViewのアクセスを作成する｣

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

今回は、Backbone.jsで、
SuperViewとSubViewのアクセスを作成します。

具体的には、
更新と削除の2つのボタンを表示して、
押下すると、それぞれのボタン固有の文字列を表示する内容を作成します。

今回使用する環境は下記の通りです。

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/

---

■SubViewにSuperViewのオブジェクトを渡す

【デモはこちら】
【ソースファイルはこちら】

SubViewにSuperViewのオブジェクトを渡して
それぞれのSubViewでボタンを押下すると
SuperViewの関数を実行して文字列を描画します。

main.js に下記の内容を記述します。

$(function() {
    var BaseView = Backbone.View.extend({
        initialize : function() { // (1)
            this.updateButtonView = new UpdateButtonView({
                'parent' : this
            });
            this.deleteButtonView = new DeleteButtonView({
                'parent' : this
            });
        },
        render : function() {
            this.$el.append($('
', {
                'id' : 'id_label'
            }));
            this.$el.append(this.updateButtonView.el).append(this.deleteButtonView.el);
            return this;
        },
        renderLabel : function(message) {
            this.$el.find('#id_label').html(message); // (4)
        }
    });

    var UpdateButtonView = Backbone.View.extend({
        tagName : 'input',
        id : 'id_button_update',
        attributes : {
            type : 'button',
            value : '更新'
        },
        events : {
            'click' : 'onClick',
        },
        initialize : function(args) {
            this.parent = args.parent; // (2)
        },
        onClick : function(event) {
            console.log('UpdateButtonView#onClick');
            this.parent.renderLabel('UpdateButtonView'); // (3)
        }
    });

    var DeleteButtonView = Backbone.View.extend({
        tagName : 'input',
        id : 'id_button_delete',
        attributes : {
            type : 'button',
            value : '削除'
        },
        events : {
            'click' : 'onClick',
        },
        initialize : function(args) {
            this.parent = args.parent;
        },
        onClick : function(event) {
            console.log('DeleteButtonView#onClick');
            this.parent.renderLabel('DeleteButtonView');
        }
    });

    var baseView = new BaseView();
    $('body').append(baseView.render().el);
});

BaseView がSuperView(親View)で、
UpdateButtonViewとDeleteButtonViewがSubView(子View)となります。

(1)SuperViewのinitialize関数で、SubViewを定義します。new する際にSuperView(this)をSubViewの引数に渡しています。
(2)SubViewのinitialize関数で、SuperViewのオブジェクトを保持しています。
更新ボタンを押下した場合は、(3)UpdateButtonViewのonClick関数が実行され、SuperViewのrenderLabel関数が実行され、(4)で文字列を描画します。
削除ボタンを押下した場合も同様です。

---

■イベント(listenToとtrigger)を使う

【デモはこちら】
【ソースファイルはこちら】

別の方法として、
SuperViewでSubViewのイベントを監視して、
それぞれのSubViewでボタンを押下すると
イベントを発火して、そのイベントをハンドリングすることで文字列を描画します。

main.js に下記の内容を記述します。

$(function() {

    var BaseView = Backbone.View.extend({
        initialize : function() { // (1)
            this.updateButtonView = new UpdateButtonView();
            this.deleteButtonView = new DeleteButtonView();
            this.listenTo(this.updateButtonView, 'update', this.onUpdate);
            this.listenTo(this.deleteButtonView, 'delete', this.onDelete);
        },
        render : function() {
            this.$el.append($('
', {
                'id' : 'id_label'
            }));
            this.$el.append(this.updateButtonView.el).append(this.deleteButtonView.el);
            return this;
        },
        renderLabel : function(message) {
            this.$el.find('#id_label').html(message);
        },
        onUpdate : function(message) {
            console.log('BaseView#onUpdate'); // (3)
            this.renderLabel(message);
        },
        onDelete : function(message) {
            console.log('BaseView#onDelete');
            this.renderLabel(message);
        }
    });

    var UpdateButtonView = Backbone.View.extend({
        tagName : 'input',
        id : 'id_button_update',
        attributes : {
            type : 'button',
            value : '更新'
        },
        events : {
            'click' : 'onClick',
        },
        onClick : function(event) {
            console.log('UpdateButtonView#onClick');
            this.trigger('update', 'UpdateButtonView'); // (2)
        }
    });

    var DeleteButtonView = Backbone.View.extend({
        tagName : 'input',
        id : 'id_button_delete',
        attributes : {
            type : 'button',
            value : '削除'
        },
        events : {
            'click' : 'onClick',
        },
        onClick : function(event) {
            console.log('DeleteButtonView#onClick');
            this.trigger('delete', 'DeleteButtonView');
        }
    });

    var baseView = new BaseView();
    $('body').append(baseView.render().el);
});

(1)SuperViewのinitialize関数で、SubViewを定義します。それぞれのSubViewに対して、listenToでイベントを監視します。
・UpdateButtonView は、｢update｣イベントを監視。イベント発火時には、onUpdate関数が実行されます。
・DeleteButtonView は、｢delete｣イベントを監視。イベント発火時には、onDelete関数が実行されます。
更新ボタンが押下した場合、(2)UpdateButtonViewのonClick関数が実行され、｢update｣イベントを発火します。(3)SuperViewのonUpdate関数が実行されます。
triggerの第2引数には、SuperViewで描画する文字列を設定します。そうすると、SuperViewのonUpdate関数の引数に渡されます。
削除ボタンを押下した場合も同様です。

以上です。

---

□過去の記事

Backbone.js入門その3｢Backbone.ViewでSubViewを作る｣
Backbone.js入門その2｢Backbone.Viewで複数の要素を作る｣
Backbone.js入門その1｢Backbone.Viewで1つの要素を作る｣