Ember.js: View listening for keypress event

Question

In my application I have a panel which contains some settings information. This panel is opened/closed with a button click, but I'd also like to be able to close it by hitting esc on the keyboard.

The code for my View looks like this:

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");
    }
});

I've tried keyup and keydown as well but nothing happens. I suspect that it's because that this isn't an "input" type View but just a standard view. So how can I trigger a method on a View from a key event?

I should clarify that this is not within the context of a Route for this particular element. I'm opening the panel standalone as can be seen in this video:

http://screencast.com/t/tDlyMud7Yb7e

UPDATE 1

Here's a quick fiddle that I've created to illustrate the issue I'm having. I can get the click event to trigger quite easily, but I'm looking for a page wide keyup event that will detect the esc key being pressed and trigger a method on a specific View:

Answer 1

For keyPress to work, you have to bring focus to the view. When it is an input, it works because you are bringing focus to it.

Something like this:

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);
  }
});

Here are a working example: http://jsbin.com/ihuzov/1

Answer 2

I think you have misspelled the keypress event. It should be keyPress. For sake of completeness, the following are the events that can be handled by a View (taken from Ember source/doc):

Event Names

Possible events names for any of the responding approaches described above are:

Touch events:

• touchStart
• touchMove
• touchEnd

• touchCancel

  Keyboard events

• keyDown

• keyUp

• keyPress

  Mouse events

• mouseDown

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

• mouseLeave

  Form events:

• submit

• change
• focusIn
• focusOut

• input

  HTML5 drag and drop events:

• dragStart

• drag
• dragEnter
• dragLeave
• drop
• dragEnd