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:

This doesnt work for you?: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery — Ricardo Ortega Magaña, Mar 11 '13 at 19:34
Ricardo, I know that I can set up a listener for the entire body, but I need to be able to call a method on the `MainPanelView` when esc is pressed. That means I need to be able to do it from within Ember. At the very least I need to be able to set it up within Ember. — commadelimited, Mar 11 '13 at 20:00

score 22 · Answer 1 · answered Jun 08 '13 at 14:25

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

keyPress still doesn't work, but this solution works for keyDown or keyUp. — gdub, Jun 19 '13 at 18:46

score 18 · Answer 2 · edited Sep 23 '13 at 22:47

18

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

edited Sep 23 '13 at 22:47

Toosick

460
1
6
14

answered Mar 11 '13 at 19:37

mavilein

11,648
4
43
48

4

I think, if you call the events within an input-helper you have to write it with a hyphen like this {{input type="text" value=search key-press="query"}}. At least this works for me in Ember 1.7.0 and keyPress didn't. – Pascal Sep 16 '14 at 08:50

Ember.js: View listening for keypress event

2 Answers2

Event Names

Linked