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

});

(*)备注如上所述,只有当您要绑定的项目没有自己的视图时才最好这样做,如果您有完整页面的视图(应用程序视图或类似的东西),您可以绑定键盘在那里,并举起App.trigger('keypressed', e);例如一个事件.

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

App.bind('keypressed', goBack);

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