【js】Backbonejsでeventsを継承させる方法

こんばんは。
たかきです。

Backbonejsって便利ですけどeventsは継承してくれなくて困りますよね。
昨日仕事でeventsをなんとか継承させることはできないかあれこれやっていたらできたので披露します。

まず、こんな継承元のViewがあったとします。

var dadView = Backbone.view.extend({
  events: {
    'tap .hoge': 'hoge',
    'tap .foo': 'foo',
  }
});

なんて感じの。

そしてこれを継承します。
(requirejsとかで、上記親Viewが DadViewと定義されているとして、)

var sonView = DadView.extend({
  events: {
    'tap .baa': 'baa'
  }
});

なんてすると、Dadの hogeや foo は生かされず、 baaだけのものに上書きされてしまいます。
これをなんとか3つとも使いたい。

eventsって、functionとして書けるのをご存知ですか?
function が object を return することでも指定できるんです。実は。
なので、親のeventsも使いつつ、継承した子が新たにeventsを追加するには、

var sonView = DadView.extend({
  events: function() {
    return _.extend(DadView.prototype.events, {
      'tap .baa': 'baa'
    };
  }
});

とすればいいのです。

親のeventsは DadView.prototype.events でアクセスできるので、 _.extend() を使って新しいのを足せばいいんですね。
便利!

カテゴリー: front-end, JavaScript, エンジニア パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*