Backbone: 親イベントの継承方法（events, initialize プロパティでの継承）
まずは 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!');
}
});
上記の２つ以外にも方法がありまして、originalEvents プロパティと additionalEvents プロパティを用意して events プロパティでマージする方法もわかりやすいです。
また、さらに継承する際には、親の events プロパティが Function かどうかを判断する必要があったりします。
これらの方法については参考記事をみていただければ幸いです。