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

Pauly Dee picture Pauly Dee · Aug 18, 2011 · Viewed 26k times · Source

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.

Answer

fearphage picture fearphage · Sep 16, 2011

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.