In backbone.js come si associa una chiave al documento

Question

Ho seguito un tutorial di Railscast su backbone.js e volevo estendere la funzionalità per includere il controllo della tastiera. Ho aggiunto il seguente al mio punto di vista spettacolo:

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 

Sul mio modello di spettacolo ho il seguente:

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

Se seleziono il link con il tasto tab, poi iniziare a colpire chiavi casuali che ricevo uscita nella mia console javascript. Tuttavia se carico la pagina e non seleziono il collegamento e inizio a premere i tasti non ottengo alcun output nella mia console.

Come si associa l'evento al documento in modo che esso possa ascoltare qualsiasi tasto premuto durante il caricamento dello schermo?

Answer 1

È necessario aggirare l'ambito del backbone per le viste. quando si sta facendo qualcosa di simile:

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

si sono vincolanti vostra funzione goBack all'evento keyup rilievo sul vostro elemento contenitore del vostro punto di vista. (Per impostazione predefinita il div in cui la vista è resa)

invece di fare che, se si desidera associare a qualcosa di fuori della vostra vista (che non disponga di un proprio 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; 
    } 

}); 

(*) osservazione come indicato sopra, è meglio farlo solo quando l'elemento che si desidera associare non ha la propria vista, se si dispone di una vista per la pagina intera (una vista app o qualcosa di simile che) si potrebbe legare la chiave di accesso lì, e basta sollevare un evento App.trigger('keypressed', e); per esempio.

è possibile quindi nella vista EntryShow, associare all'evento keypressed di quell'app.

App.bind('keypressed', goBack); 

tenere a mente che si dovrebbe fare qualcosa come un evento di ritardo o di raggruppamento tasti premuti insieme in alcune situazioni, come sparando ogni pressione del tasto che accade nel corpo, potrebbe essere un grande calo di prestazioni. specialmente sui browser più vecchi.

Answer 2

Gli eventi verranno esaminati per l'elemento di visualizzazione @el. Per catturare gli eventi sul document, si deve rotolare tu stesso:

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

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

dovrebbe fare il trucco.