は、私のバックボーンビュー内バックボーンの `event`ハッシュ

Question

に` on`のパターンを翻訳initialize機能で、私はものを行うよう：

initialize: function() { 
    $(this.el).on('click', '.button', function() { 
     $(this).fadeTo(0.5); 
    } 
} 

これはeventsを使用してのバックボーンの慣例に反するように思われます。 eventsハッシュと書き換え：

events: { 'click .button': 'fadeButton' }, 
fadeButton: function() { 
    $(this).fadeTo(0.5); 
} 

問題がthisの値が.on()を使用する場合と同じではないfadeButton「の範囲内にあります。 eventsハッシュを使用してこれを行う正しい方法は何ですか？

Answer 1

paulのように、バックボーンは自動的にイベントコールバックのコンテキストをビュー自体に設定します。したがって、コールバック内のthisはビューインスタンスになります。

だから、あなたは、ビューのスコープセレクタ機能を使って、予定の効果...

events: { 
    'click .button': 'fadeButton' 
}, 

fadeButton: function() { 
    this.$('.button').fadeTo(0.5); 
} 

を得ることができます...しかし、あなたはあなたのビューでクラス"button"で複数の要素を持っているならば、それはよjQueryのは、あなたを与えることをあなたは常にイベントターゲット取得するためにイベントオブジェクトを使用することができ、その場合にはそれらのすべて、フェード：それは `this.el`色あせする必要がありますされていない

fadeButton: function (event) { 
    $(event.target).fadeTo(0.5); 
} 

Answer 2

イベントハッシュを正しく定義しました。

定義されたすべてのイベントハンドラに対して、Backboneは自動的にコンテキストをビューに設定します。したがって、this内のfadeButtonがビューであり、ビューの要素にアクセスする必要があります。

以下のコードは、fadeButtonの機能を更新する必要がある方法を示しています。

fadeButton: function() { 
    $(this.el).fadeTo(0.5); 
}