在backbone.js中，如何将keyup绑定到文档

Question

我一直在学习backbone.js的Railscast教程，我想将功能扩展到包括键盘控制。我在我的节目视图中添加了以下内容：

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>

如果我使用tab键选择返回链接，然后开始点击我在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;
  }
});

（*）备注如上所述，最好只有当要绑定的项目没有自己的视图时才执行此操作，如果您有完整页面的视图（应用程序视图或类似的视图），则可以在其中绑定keyup，例如，只需引发事件App.trigger('keypressed', e);。

然后，您可以在EntryShow视图中绑定到该应用程序的keypressed事件。

App.bind('keypressed', goBack);

请记住，在某些情况下，您应该将某件事作为延迟事件或将按键组合在一起，因为触发身体中发生的每一个按键可能会对性能造成很大影响。尤其是在较旧的浏览器上。

Answer 2

您的事件将以视图元素@el为范围。要在document上捕获事件，您必须自己滚动：

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

应该做这个把戏。