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

});

（*）备注如上所示，只有当您要绑定的项目没有自己的视图时，如果您有整个页面的视图（应用程序），则最好这样做查看或类似的东西）你可以绑定那里的密钥，并举例说明事件App.trigger('keypressed', e);。

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

App.bind('keypressed', goBack);

请记住，在某些情况下，你应该做一些延迟事件或将按键分组在一起，因为解雇身体中发生的每一个按键，可能是一个很大的性能损失。特别是在旧浏览器上。

Answer 2

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

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

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

应该做的伎俩。

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

2 个答案: