Dans Backbone.js comment puis-je lier un keyup au document

Question

J'ai suivi avec un tutoriel Railscast de Backbone.js et je voulais étendre les fonctionnalités pour inclure le contrôle du clavier. J'ai ajouté ce qui suit à mon point de vue du spectacle:

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

Sur mon modèle de spectacle que je donne les résultats suivants:

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

Si je sélectionne le lien de retour à l'aide de la touche de tabulation, puis commencez à frapper les touches au hasard que je reçois dans ma sortie console javascript. Toutefois, si je charge la page et ne sélectionnez pas le lien et juste commencer à frapper les touches que je reçois pas de sortie dans ma console.

Comment puis-je lier l'événement au document afin qu'il écoutera toutes les touches enfoncées lors du chargement de l'écran?

Answer 1

Vous aurez besoin de travailler autour du champ pour les vues de colonne vertébrale. quand vous faites quelque chose comme ceci:

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

vous liez votre fonction goBack à l'événement keyup soulevé sur votre élément conteneur de votre point de vue. (Par défaut, la div dans laquelle la vue est rendue)

au lieu de le faire, si vous voulez lier à quelque chose en dehors de votre point de vue (qui ne dispose pas de son propre point de vue! (*) )

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

});

(*) remarque comme indiqué ci-dessus, vous mieux le faire que lorsque l'élément que vous souhaitez lier ne dispose pas de son propre point de vue, si vous avez une vue pour votre page complète (une application vue ou quelque chose comme ça), vous pouvez lier le keyup là-dedans, et lever juste un App.trigger('keypressed', e); d'événement par exemple.

vous pouvez alors dans votre vue EntryShow, se lient à cet événement de keypressed de App.

App.bind('keypressed', goBack);

garder à l'esprit que vous devez faire quelque chose comme un événement retard ou de regroupement ainsi que dans certaines pressions sur les touches situations, comme le tir à chaque pression de touche qui se passe dans le corps, peut-être un grand succès de la performance. en particulier sur les anciens navigateurs.

Answer 2

Vos événements seront scope à votre élément de vue @el. Pour les événements de capture sur la document, vous devez rouler vous-même:

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

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

devrait faire l'affaire.