backbone.jsでキーアップを文書にバインドするには

Question

私はbackbone.jsのRailscastチュートリアルに従っており、キーボードコントロールを含むように機能を拡張したかったのです。私のショーのテンプレートに

class Raffler.Views.EntryShow extends Backbone.View 
    template: JST['entries/show'] 

    events: 
    'click .back': 'showListing' 
    'keyup': 'goBack' 

    showListing: -> 
    Backbone.history.navigate("/", trigger: true) 

    goBack: (e) -> 
    console.log e.type, e.keyCode 

    render: -> 
    $(@el).html(@template(entry: @model)) 
    this 

私は、次のしている：私はタブ・キーを使用してバックリンクを選択した場合

<a href="#" class="back">Back</a> 
<%= @entry.get('name') %></td> 

が、その後、私が手にランダムキーを押す開始、私は私のショーのビューに以下を追加しました私のjavascriptコンソールに出力します。しかし、ページをロードしてリンクを選択せず​​にキーを押すだけで、私のコンソールには何も出力されません。

イベントをドキュメントにバインドすると、画面をロードするときに押されたキーを聞くことができます。

Answer 1

ビューのバックボーンの有効範囲を回避する必要があります。 ときあなたはこのような何かをやっている：

events: 
    'click .back': 'showListing' 
    'keyup': 'goBack' 

はあなたのビューのあなたのコンテナ要素で発生keyUpイベントにごgoBack機能を結合しています。代わりにそれを行うの

（ビューがレンダリングされるdivのデフォルト）、自分の視野の外に何かにバインドしたい場合（それは自身のビューの持っていない！（*））

Raffler.Views.EntryShow = Backbone.View.extend({ 
    template: JST['entries/show'], 

    events: { 
    'click .back': 'showListing' 
    }, 

    initialize: function() { 
    $('body').keyup(this.goBack); 
    }, 

    showListing: function() { 
    Backbone.history.navigate("/", trigger: true); 
    }, 

    goBack: function (e) { 
    console.log e.type, e.keyCode; 
    }, 

    render: function() { 
    $(this.el).html(this.template(entry: @model)); 
    return this; 
    } 

}); 

（*）備考に上記マークとして、あなたが最良のあなたの全ページ用のビュー（アプリビューまたはのようなものを持っている場合は、あなたがにバインドしたいアイテムが、それは自分のビューの持っていない場合にのみ、これを行いますあなたはそこでキーアップを縛ることができ、ちょうど例えばイベントApp.trigger('keypressed', e);を起こすことができます。

EntryShowビューで、そのアプリケーションのkeypressedイベントにバインドできます。

App.bind('keypressed', goBack); 

が遅延イベントまたはグループは、いくつかの状況に合わせてキー入力として、あなたが何かを行う必要があります覚えておいて、体内で起こるすべてのキー入力を発射として、大きなパフォーマンスヒットかもしれません。特に古いブラウザでは

Answer 2

イベントは、表示要素@elにスコープされます。 document上のイベントをキャプチャするには、その自分自身をロールバックする必要があります：

initialize: -> 
    $(document).on "keyup", @goBack 

remove: -> 
    $(document).off "keyup", @goBack 

は、トリックを行う必要があります。