如何使用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創建全局按鍵事件偵聽器

回答

相關問題