In Backbone.js wie bin ich ein Schlüsselup an das Dokument?

Question

Ich habe mit einem Railscast -Tutorial von Backbone.js gefolgt und wollte die Funktionalität auf die Tastatursteuerung erweitern. Ich fügte meiner Show Folgendes hinzu:

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

In meiner Show -Vorlage habe ich Folgendes:

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

Wenn ich den Rücklink mit der Registerkartenschlüssel auswähle, drücken Sie mit dem Drücken von zufälligen Tasten. Ich erhalte Ausgabe in meiner JavaScript -Konsole. Wenn ich jedoch die Seite lade und den Link nicht auswähle und einfach mit dem Drücken von Tasten auswähle, erhalte ich keine Ausgabe in meiner Konsole.

Wie bin ich das Ereignis an das Dokument, damit es beim Laden des Bildschirms alle Tasten anhört?

Answer 1

Sie müssen den Umfang von Backbone für Ansichten herumarbeiten. Wenn Sie so etwas tun:

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

Sie binden Ihre goBack Funktion zum KeyUp -Ereignis, das auf Ihrem Containerelement Ihrer Ansicht aufgeregt wurde. (Standardmäßig die Div, in der die Ansicht gerendert wird)

Anstatt das zu tun, wenn Sie sich an etwas außerhalb Ihrer Ansicht binden möchten (was nicht seine eigene Ansicht hat!(*))

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

});

(*)Anmerkung Wie oben markiert, tun Sie dies nur dann, wenn das Element, an das Sie binden möchten, keine eigene Ansicht haben. Wenn Sie eine Ansicht für Ihre vollständige Seite (eine App -Ansicht oder ähnliches) haben, können Sie das Schlüsselbetrieb dort binden. und einfach ein Ereignis anheben App.trigger('keypressed', e); zum Beispiel.

Sie können dann in Ihrer Einstiegshow -Ansicht an die dieser App binden keypressed Veranstaltung.

App.bind('keypressed', goBack);

Denken Sie daran, dass Sie in einigen Situationen etwas als verzögertes Ereignis oder ein Gruppieren von Schlüsselpressungen tun sollten, da das Abfeuern jeder Tastatur, die im Körper stattfindet, ein großer Leistungsschlag sein könnte. Besonders auf älteren Browsern.

Answer 2

Ihre Ereignisse werden nach Ihrem Sichtelement gesammelt @el. Ereignisse auf dem erfassen document, Sie müssen das selbst rollen:

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

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

Sollte den Trick machen.