En Backbone.js, ¿cómo encuentro una clave al documento?

Question

He estado siguiendo junto con un tutorial RailScast de Backbone.js y quería extender la funcionalidad para incluir el control del teclado. Agregué lo siguiente a mi vista de espectáculo:

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

En mi plantilla de programa tengo lo siguiente:

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

Si selecciono el enlace de retroceso usando la tecla de tabulación, comience a presionar las teclas aleatorias que obtengo la salida en mi consola JavaScript. Sin embargo, si carga la página y no selecciono el enlace y simplemente comienza a presionar las teclas, no obtengo salida en mi consola.

¿Cómo encuentro el evento al documento para que escuche las teclas presionadas al cargar la pantalla?

Answer 1

Deberá trabajar alrededor del alcance de Backbone para las vistas. Cuando estás haciendo algo como esto:

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

Estás atando tu goBack Funcione en el evento KeyUp recaudado en su elemento contenedor de su vista. (Por defecto, el div en el que se representa la vista)

En lugar de hacer eso, si quieres vincularte a algo fuera de tu opinión (¡que no tiene su propia vista!(*))

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

});

(*)observación Como se marcó anteriormente, lo mejor es que haga esto solo cuando el elemento al que desea vincular no tiene su propia vista, si tiene una vista para su página completa (una vista de aplicación o algo así), podría vincular la tecla allí, Y solo plantea un evento App.trigger('keypressed', e); por ejemplo.

Luego puede en su vista de entrada de entrada, vincule a esa aplicación keypressed evento.

App.bind('keypressed', goBack);

Tenga en cuenta que debe hacer algo como un evento retrasado o agrupar KeyPresses juntas en algunas situaciones, ya que disparar cada KeyPress que ocurre en el cuerpo, podría ser un gran éxito de rendimiento. Especialmente en navegadores más antiguos.

Answer 2

Tus eventos se alcanzarán a tu elemento de vista @el. Para capturar eventos en el document, tienes que enrollar eso tú mismo:

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

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

Debería hacer el truco.