В 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

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

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

});

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

затем вы можете в представлении EntryShow привязать к событию keypressed этого приложения.

App.bind('keypressed', goBack);

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

Answer 2

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

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

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

Должен сделать трюк.