Ember.js: просмотр прослушивания события нажатия клавиши

В моем приложении у меня есть панель, содержащая некоторые данные настроек. Эта панель открывается/закрывается нажатием кнопки, но я также хотел бы закрыть ее, нажав 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, но ничего не происходит. Я подозреваю, что это потому, что это не тип ввода, а просто стандартный вид. Итак, как я могу вызвать метод в представлении из ключевого события?

Я должен уточнить, что это не входит в контекст Маршрута для этого конкретного элемента. Я открываю панель отдельно, как показано на этом видео:

http://screencast.com/t/tDlyMud7Yb7e

ОБНОВЛЕНИЕ 1

Вот сценарий, который я создал, чтобы проиллюстрировать возникшую у меня проблему. Я могу получить событие click для запуска довольно легко, но я ищу событие с клавиатурой на странице, которое будет обнаруживать нажатие клавиши esc и запуск метода на конкретном представлении:

Ответ 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

Ответ 2

Я думаю, что вы набрали слово с клавишами. Это должно быть keyPress. Для полноты, следующие события, которые могут обрабатываться представлением (взятым из Ember source/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