6

我一直在关注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 控制台中得到输出。但是，如果我加载页面并且不选择链接而只是开始按键，我的控制台中没有输出。

如何将事件绑定到文档，以便在加载屏幕时监听按下的任何键？

4

2 回答 2

6

您将需要围绕主干的视图范围工作。当你做这样的事情时：

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

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

于 2012-02-16T09:57:42.770 回答
4

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

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

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

应该做的伎俩。

于 2012-02-16T09:58:06.313 回答