6

私は 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 コンソールに出力が表示されます。ただし、ページを読み込んでリンクを選択せず​​にキーを押し始めると、コンソールに出力が表示されません。

画面の読み込み時に押されたキーをリッスンするように、イベントをドキュメントにバインドするにはどうすればよいですか?

4

2 に答える 2

6

ビューのバックボーンのスコープを回避する必要があります。あなたがこのようなことをしているとき：

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

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);

本体で発生するすべてのキー押下を起動すると、パフォーマンスが大幅に低下する可能性があるため、遅延イベントとして何かを実行するか、状況によってはキー押下をグループ化する必要があることに注意してください。特に古いブラウザでは。

于 2012-02-16T09:57:42.770 に答える
4

イベントはビュー要素にスコープされます@el。でイベントをキャプチャするにはdocument、自分でロールする必要があります。

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

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

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

于 2012-02-16T09:58:06.313 に答える