Question

我正在开发一个应用程序，我希望完全由键盘输入驱动，而不是任何鼠标点击。它是使用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>

在这种情况下，我想处理发现区域上的控制键盘输入。但是，我也希望以后删除该区域，并将其他区域放在其中。我应该创建一个处理事件的全局机制吗？

Answer 1

我设法通过创建一个布局视图来存档它，在这个布局中我定义了一个区域，在这个区域内我可以显示我想要的视图并在需要时交换它们，在布局视图中我还定义了一个事件监听区域内的密钥。它对我有用，唯一的诀窍是焦点必须放在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/

我希望这会有所帮助。

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

Answer 3

这可能很有用，因为它为您的问题提供了一个很好的清洁解决方案

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

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

3 个答案: