如何使用 Marionette 创建全局按键事件侦听器
Posted
技术标签:
【中文标题】如何使用 Marionette 创建全局按键事件侦听器【英文标题】:How to create a global keypress event listener with Marionette 【发布时间】:2013-06-23 19:44:40 【问题描述】:我正在开发一个应用程序,我希望它完全由键盘输入驱动,而不是任何鼠标点击。它是使用 Marionette 开发的,虽然我完全能够响应输入事件,但我真的很难响应不包含任何输入的视图上的事件。
events: ->
'keyup #discovery-region' : 'logKey'
logKey: (e) ->
alert("Key pressed")
console.log("Key pressed " + e.which)
在我的 index.html 文件中
<div class="discovery" id="discovery-region"></div>
在这种情况下,我想处理发现区域上的控制键盘输入。但是,我还希望以后删除该区域,并在其位置上放置另一个区域。我应该创建一些全局机制来处理事件吗?
【问题讨论】:
【参考方案1】:我设法通过创建一个布局视图来归档它,在这个布局内我定义了一个区域,在这个区域内我可以显示我想要的任何视图并在需要时交换它们,在布局视图中我还定义了一个事件区域内keyup的监听器。 它对我有用,唯一的窍门是重点必须放在 Region div 上。但我认为您可以向其他地区添加更多听众...
var MyLayout = Backbone.Marionette.Layout.extend(
template: "#layout-template",
events :
"keyup #aRegion" : "test"
,
regions:
aRegion: "#aRegion"
,
test : function ()
console.log("hi");
);
这是工作的 jsfiddle http://jsfiddle.net/rayweb_on/b7tbX/
我希望这会有所帮助。
【讨论】:
【参考方案2】:我会尝试使用事件进行交流:
events: ->
'keyup #discovery-region' : 'triggerKeyEvent'
triggerKeyEvent: (e) ->
MyApp.trigger("discovery:region:keypress", e)
然后,在需要响应它的视图中,您只需为该事件添加事件侦听器:
myViewInstance.on("discovery:region:keypress", (e) ->
// do something with the keypress event
由于您的应用现在广播按键事件,因此每个视图都可以在创建/显示视图时简单地收听它们。问题解决了!
附带说明,根据视图需要对按键做出反应的原因,您可能还想查看 triggerMethod 以直接触发视图的方法,但我认为这不是您想要的。
【讨论】:
【参考方案3】:这可能很有用,因为它为您的问题提供了一个很好的干净解决方案
https://github.com/Puppets/marionette-cookbook/tree/master/recipes/hotkeys
【讨论】:
以上是关于如何使用 Marionette 创建全局按键事件侦听器的主要内容,如果未能解决你的问题,请参考以下文章
带有 Marionette 视图的主干模式 - 子视图事件没有被触发
在主干js中有“onDomRefresh”事件(在Marionette中)有什么替代方案吗?