Ember.js：查看按鍵事件監聽

Question

在我的應用程序中，我有一個包含一些設置信息的面板。 該面板通過單擊按鈕打開/關閉，但我也希望能夠通過按鍵盤上的esc來關閉它。

我的視圖的代碼如下所示：

Social.MainPanelView = Ember.View.extend({
    elementId: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    keypress: function(e){
        console.log(e);
        console.log('keypress');
    },
    close: function(){
        this.$().prepareTransition().addClass("closed");
    }
});

我也嘗試過 keyup 和 keydown，但沒有任何反應。 我懷疑這是因為這不是“輸入”類型的視圖，而只是標准視圖。 那么如何從關鍵事件觸發 View 上的方法呢？

我應該澄清一下，這不在此特定元素的 Route 上下文中。 如本視頻所示，我正在獨立打開面板：

http://screencast.com/t/tDlyMud7Yb7e

更新 1

這是我創建的一個快速小提琴，用於說明我遇到的問題。 我可以很容易地觸發點擊事件，但我正在尋找一個頁面范圍的 keyup 事件，它將檢測被按下的 esc 鍵並在特定視圖上觸發一個方法：

Answer 1

要使 keyPress 起作用，您必須將焦點放在視圖上。 當它是一個輸入時，它會起作用，因為您將注意力集中在它上面。

像這樣的東西：

App = Em.Application.create();

App.IndexController = Em.Controller.extend({
  updateKey: function(keyCode) {
    // Do what you gotta do
    this.set('shortcutKey', keyCode);
  },
  shortcutKey: null
});

App.IndexView = Em.View.extend({
  didInsertElement: function() {
    return this.$().attr({ tabindex: 1 }), this.$().focus();
  },

  keyDown: function(e) {

    this.get('controller').send('updateKey', e.keyCode);
  }
});

這是一個工作示例： http : //jsbin.com/ihuzov/1

Answer 2

我認為您拼錯了按鍵事件。 它應該是keyPress 。 為了完整起見，以下是視圖可以處理的事件（取自Ember 源/文檔）：

事件名稱

上述任何響應方法的可能事件名稱是：

觸摸事件：

• touchStart
• touchMove
• touchEnd

• touchCancel

  鍵盤事件

• keyDown

• keyUp

• keyPress

  鼠標事件

• mouseDown

• mouseUp
• contextMenu
• click
• doubleClick
• mouseMove
• focusIn
• focusOut
• mouseEnter

• mouseLeave

  表單事件：

• submit

• change
• focusIn
• focusOut

• input

  HTML5 拖放事件：

• dragStart

• drag
• dragEnter
• dragLeave
• drop
• dragEnd