En backbone.js, ¿cómo puedo vincular una clave al documento

Question

? He estado siguiendo junto con un tutorial de Backbone.js de Railscast y quería extender la funcionalidad para incluir el control del teclado. He añadido lo siguiente a mi programa de vista:

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 espectáculo que he lo siguiente:

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

Si selecciono el acoplamiento de nuevo usando la tecla de tabulación, a continuación, comenzar a golpear claves aleatorias que recibo salida en mi consola de JavaScript. Sin embargo, si cargo la página y no elijo el enlace y solo comienzo a presionar las teclas, no obtengo ningún resultado en mi consola.

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

Answer 1

Tendrá que trabajar alrededor del alcance de las vistas de la red troncal. cuando estás haciendo algo como esto:

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

va a enlazar su función goBack al evento keyup planteado en su elemento contenedor de la vista. (Por defecto el div en el que se representa la vista)

lugar de hacer eso, si desea unirse a algo fuera de su vista (que no tiene su propio punto de 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 indicó anteriormente, lo mejor es hacerlo solo cuando el elemento al que desea enlazar no tiene su propia vista, si tiene una vista para su página completa (una vista de aplicación o algo así eso) podría enlazar la clave allí, y simplemente generar un evento App.trigger('keypressed', e); por ejemplo.

puede entonces, en su vista de EntryShow, vincularse al evento keypressed de esa Aplicación.

App.bind('keypressed', goBack); 

tener en cuenta que usted debe hacer algo como un evento retardado o agrupación teclas presionadas juntas en algunas situaciones, como disparar cada pulsación de tecla que sucede en el cuerpo, puede haber un gran impacto en el rendimiento. especialmente en navegadores más antiguos.

Answer 2

Sus eventos se escalarán a su elemento de vista @el. Para capturar eventos en el document, usted tiene que rodar que usted mismo:

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

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

debe hacer el truco.