如何使用Marionette创建全局按键事件侦听器

我正在开发一款应用程序，我希望完全由键盘输入驱动而不是鼠标单击。它是使用Marionette开发的，虽然我完全能够对输入事件做出反应，但我真的很努力回应没有任何输入的视图事件。如何使用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>

在这种情况下我要处理的发现区域控制键盘输入。不过，我也希望这个地区在以后的日子里被取消，而另一个地区则在这个地方。我应该创建一个处理事件的全局机制吗？

来源

2013-06-26 Mr Wilde

我设法通过创建一个布局视图来存档这个布局我在这个区域内定义了一个区域我可以显示我想要的任何视图并在需要的时候交换它们在布局视图中我还定义了一个事件监听器用于该区域内的按键。它为我工作，唯一的窍门是焦点必须在区域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/

我希望这有助于。

来源

2013-06-26 17:40:46

我会尝试利用事件进行通讯：

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以直接触发视图的方法，但我不认为这就是您想要的。

来源

2013-06-27 07:21:25

，因为它提供了一个很好的清洁解决您的问题

https://github.com/Puppets/marionette-cookbook/tree/master/recipes/hotkeys

这可能是有用的

来源

2014-07-18 10:14:55 MrX

如何使用Marionette创建全局按键事件侦听器

回答

相关问题