Ember.js:查看按键事件的监听

Question

在我的应用程序中,我有一个包含一些设置信息的面板.点击按钮即可打开/关闭此面板,但我也希望能够通过敲击esc键盘来关闭它.

我的View代码如下所示:

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上的方法呢？

我应该澄清,这不属于这一特定要素的路线.我正在打开独立面板,如本视频中所示:

http://screencast.com/t/tDlyMud7Yb7e

更新1

这是我创建的一个快速小提琴,用于说明我遇到的问题.我可以很容易地触发click事件,但我正在寻找一个页面范围的keyup事件,它将检测被按下的esc键并触发特定View上的方法:

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.为了完整起见,以下是View可以处理的事件(取自Ember源/ doc):

活动名称

上述任何响应方法的可能事件名称是:

触摸事件:

• 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