Backbone.js - Adding keydown events when view is active?

Question

I have a view called gallery that options. I want to listen and act on keydown events when the gallery is rendered (until it's closed).

How do I do this in backbone events? I've tried all variations of 'keydown X':function and none have worked.

show us your selectors for `keydown` events... i think you binding them to wrong elements — ant_Ti, Aug 18 '11 at 14:36
Try on render bind event to `$(document)` and on `.remove()` make `unbind()` — ant_Ti, Aug 18 '11 at 18:50

score 23 · Accepted Answer · answered Sep 16 '11 at 18:06

23

I just tested the following and it worked flawlessly:

var view = Backbone.View.extend({
  // ... snip ...
  events: {
    'keyup :input': 'logKey'
    ,'keypress :input': 'logKey'
  }
  ,logKey: function(e) {
    console.log(e.type, e.keyCode);
  }
});

I'd go back and check your code. All events in Backbone are defined as delegates attached to the viewInstance.el element. To unbind the events, call viewInstance.remove() which calls $(viewInstance.el).remove() under the covers and cleans up all the delegated events.

Also note that in some browsers (Firefox I believe) there's a known issue that some keys (like arrow keys) don't bubble and will not work properly with delegated keypress events. If you're catching special keys, you're probably better off using keyup and keydown.

answered Sep 16 '11 at 18:06

fearphage

16,808
1
27
33

2

Isn't this making assumptions that the View in question contains inputs? I think the OP was asking about the case where a particular view is simply rendered -- imagine that there is a lightboxed image or something and you wanted to hook up "Escape" to closing the image... – Oct 26 '11 at 07:21
2

You are correct. My solution assumes there are input elements. If you wanted to act on key events anywhere in the view, you just exclude the selector (as the Backbone documentation states). `events: {keyup: 'logKey'}` – fearphage Oct 26 '11 at 15:33
9

- I can't get these global keypress/keyup/keydown to work. Is there some other minor detail that I must be forgetting? Could you possibly point to a reference or even a fiddle for more information of the document-wide events – streetlight Apr 16 '13 at 11:37

Backbone.js - Adding keydown events when view is active?

1 Answers1