在backbone.js中如何绑定密钥到文档

我一直在关注backbone.js的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>

如果我选择使用Tab键返回链接，然后开始打随机密钥我得到输出在我的JavaScript控制台。但是，如果我加载页面，并不选择链接，只是开始按键，我没有输出在我的控制台。

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

来源

2012-02-16 map7

[backbone.js - 用输入值过滤集合]的可能重复（http://stackoverflow.com/questions/9244773/backbone-js-filtering-a-collection-with-the-value-从输入） – 2012-02-16 03:18:29

它是相同的功能，但我怀疑它可以被看作是一个重复，这个人具体问他如何解决一个视图的范围，绑定关键事件的文件，而不是单一输入。该文件很可能在视图范围之外。在他自己的例子中，他只是绑定到'keyup'，这意味着他将其绑定到他的视图的容器元素，这很可能不是整个页面。 – Sander 2012-02-16 09:39:59

您将需要解决骨干的观点范围。当你正在做这样的事情：

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-16 09:57:42 Sander

这适用于我在视图的初始加载。但是，当用户第二次导航到视图时，绑定会重新应用，并且每次'keyup'事件都会触发该方法两次。 – wuliwong 2013-02-13 20:34:13

您可以通过两种方法解决这个问题，您可以使用视图管理器，如骨干牵线木偶（或您自己写的），并在视图关闭时解除按键事件。或者你可以让它束缚，但是可以处理一些处理过的状态。当你绑定到keypressed事件时你只做一次，检查keypressedprocessed类是否在容器上。如果没有，绑定到它，否则就不要。（在绑定之后，必须设置类，以便第二次访问时不再绑定。） – Sander 2013-02-14 10:19:18

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

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

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

应该这样做。

来源

2012-02-16 09:58:06

此答案解决绑定的删除问题，但remove（）不会自动调用，对吗？每次用户从视图导航时，都需要调用某些内容。相反，我只是确保先前的绑定在我将其应用于当前视图之前被删除。这有点hacky，但它的作品。 – wuliwong 2013-02-13 21:45:17

@wuliwong yep我不认为会自动调用remove（）。当用户离开视图时会自动调用'initialize'的反义词是什么？在文档中找不到一个。任何解决方案 – 2015-12-08 22:53:52

在backbone.js中如何绑定密钥到文档

回答

相关问题