В Backbone.js, как мне связать ключ к документу

Question

Я следил за учебником Railscast о Backbone.js, и я хотел расширить функциональность, чтобы включить управление клавиатурой. Я добавил следующее к своему представлению шоу:

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

На моем шаблоне шоу у меня есть следующее:

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

Если я выберу обратную ссылку, используя клавишу вкладки, то начну нажать случайные клавиши, я получаю вывод в моей консоли JavaScript. Однако, если я загружаю страницу и не выберу ссылку и просто начну наносить нажимать клавиши, я не получаю вывода в мою консоли.

Как связать событие с документом, чтобы оно прослушивало какие -либо нажатые клавиши при загрузке экрана?

Answer 1

Вам нужно будет обойти сферу Backbone для просмотров. Когда вы делаете что -то вроде этого:

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

вы связываете свой goBack Функциональны события Keyup, поднятое на вашем элементе контейнера вашего представления. (По умолчанию DIV, в котором визуализируется представление)

Вместо того, чтобы делать это, если вы хотите привязать к чему -то вне вашего мнения (у которого нет собственного взгляда!(*))

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

});

(*) замечание Как отмечено выше, вы лучше всего делаете это только тогда, когда элемент, с которым вы хотите связать, не имеет собственного представления, если у вас есть представление для вашей полной страницы (представление приложения или что -то в этом роде), вы можете связать Keyup там, И просто поднимите мероприятие App.trigger('keypressed', e); Например.

Затем вы можете в своем просмотре записи, привязаться к этому приложению keypressed мероприятие.

App.bind('keypressed', goBack);

Имейте в виду, что вы должны делать что -то как задержка или группировка клавишных в некоторых ситуациях, так как увольнение каждого ключа, которое происходит в теле, может быть большим успехом. Особенно в более старых браузерах.

Answer 2

Ваши события будут охвачены элементом вашего просмотра @el. Анкет Чтобы захватить события на document, вы должны свернуть это самостоятельно:

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

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

Должен сделать свое дело.