Backbone: 親イベントの継承方法(events, initialize プロパティでの継承)

JavaScript Backbone

まずは Backbone で書いたこんなコードがあります。

var App = { View: {} };

App.View.Hoge = Backbone.View.extend({
    events: {
        'click #hello': 'hello'
    },
    hello: function() {
        alert('Hello!');
    }
});

これを動かすと、当然、以下のように Hello! ボタンをクリックすることでアラートが表示されます。


次に、この App.View.Hoge を継承して新しい App.View.Fuga を作ります。

App.View.Fuga = App.View.Hoge.extend({
    events: {
        'click #thankyou': 'thank'
    },
    thank: function() {
        alert('Thank you!');
    }
});

var FugaView = new App.View.Fuga({ el: '#hello-application' });

これを動かしてみると、Hello! ボタンをクリックしてもアラートが表示されません。
しかし、新しく定義した Thank you! ボタンは指定したアラートが表示されます。


親のイベントを継承するには、events プロパティに以下のように書くことで実現可能です。

App.View.Fuga = App.View.Hoge.extend({
    events: function() {
        return _.extend({}, App.View.Hoge.prototype.events, {
            'click #thankyou': 'thank'
        });
    },
    thank: function() {
        alert('Thank you!');
    }
});

これで動かしてみると Hello! ボタンも Thank you! ボタンもアラートが表示されると思います。


他にも initialize で継承する方法があります。

App.View.Fuga = App.View.Hoge.extend({
    events: {
        'click #thankyou': 'thank'
    },
    initialize: function() {
        this.events = _.extend({}, App.View.Hoge.prototype.events, this.events);
    },
    thank: function() {
        alert('Thank you!');
    }
});

上記の2つ以外にも方法がありまして、originalEvents プロパティと additionalEvents プロパティを用意して events プロパティでマージする方法もわかりやすいです。

また、さらに継承する際には、親の events プロパティが Function かどうかを判断する必要があったりします。

これらの方法については参考記事をみていただければ幸いです。

参考記事

JavaScript Backbone