2011-08-18 16 views
15

私はgalleryというオプションを持つビューを持っています。私は、ギャラリーがレンダリングされるとき(閉じられるまで)、キーダウンイベントを聞いて行動したいと思っています。Backbone.js - ビューがアクティブなときにキーダウンイベントを追加しますか?

バックボーンイベントでこれを行うにはどうすればよいですか?私は 'keydown X'のすべてのバリエーションを試しました。機能はありませんでした。

+0

あなたのギャラリーはバックボーンビューですか、スタンドアロンのhtml + jsですか? –

+0

バックボーンビューです。 –

+0

は 'keydown'イベントのセレクタを表示します...間違った要素にバインドすると思います。 –

答えて

22

私は次のことをテストし、それが完璧に働いた:

var view = Backbone.View.extend({ 
    // ... snip ... 
    events: { 
    'keyup :input': 'logKey' 
    ,'keypress :input': 'logKey' 
    } 
    ,logKey: function(e) { 
    console.log(e.type, e.keyCode); 
    } 
}); 

を、私は戻って、あなたのコードをチェックしたいです。バックボーンのすべてのイベントは、viewInstance.el要素にアタッチされたデリゲートとして定義されています。イベントのバインドを解除するには、viewInstance.remove()に電話して$(viewInstance.el).remove()を呼び出し、委任されたすべてのイベントをクリーンアップします。

一部のブラウザでは、一部のキー(矢印キーなど)がバブルせず、委任されたkeypressイベントで正常に動作しないという既知の問題があります。特殊キーを捕まえる場合は、keyupと​​を使用するほうが良いでしょう。

+2

これは、問題のビューに入力が含まれていることを前提にしていませんか?私は、特定のビューが単にレンダリングされるケースをOPが質問していたと思います。ライトボックスのイメージなどがあると想像して、イメージを閉じるために "エスケープ"を接続したいと考えています... –

+2

あなたは正しいです。私の解決策は、入力要素があると仮定しています。ビュー内の任意の場所でキーイベントを処理したい場合は、セレクタをバックボーンのドキュメント状態として除外するだけです。 'events:{keyup: 'logKey'}' – fearphage

+9

- これらのグローバルなkeypress/keyup/keydownを動作させることができません。私が忘れていなければならない他の細かいことはありますか?ドキュメント全体のイベントの詳細については、リファレンスやフィドルを指している可能性があります – streetlight