Backbone event firing on click OR press enter

Question

I am new to backbone and I am looking for a way for my button to be triggered when I press Enter as well as clicking. Currently showPrompt only executes on a click. What is the cleanest DRYest way to have it execute on pressing Enter as well, preferably only for that input field.

(function () {

  var Friend = Backbone.Model.extend({
    name: null
  });

  var Friends = Backbone.Collection.extend({
    initialize: function (models, options) {
      this.bind("add", options.view.addFriendLi);
    }
  });

  var AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function() {
      this.friends = new Friends(null, {view: this});
    },
    events: {
      "click #add-friend":  "showPrompt",
    },
    showPrompt: function () {
      var friend_name = $("#friend-name").val()
      var friend_model = new Friend({ name:friend_name });
      this.friends.add( friend_model );
    },
    addFriendLi: function (model) {
      $("#friends-list").append("<li>" + model.get('name') + "</li>");
    }
  });

  var appView = new AppView; 

}());

Also where can I read more about this kind of event binding? Do backbone events differ from JS or jQuery events in how they're defined?

score 20 · Answer 1 · edited Apr 24 '18 at 10:00

20

Assuming that you are using jQuery for DOM manipulation, you can create your own "tiny" plugin that fires the Enter event in the inputs. Put it in your plugins.js or whatever setup scripts file you have:

$('input').keyup(function(e){
  if(e.keyCode == 13){
    $(this).trigger('enter');
  }
});

Now that you have created this "enter" plugin, you can listen to enter events this way:

events: {
  "click #add-friend": "showPrompt",
  "enter #friend-name": "showPrompt"
}

edited Apr 24 '18 at 10:00

Xavier Guihot

54,987
21
291
190

answered Dec 04 '13 at 18:12

Daniel Aranda

6,426
2
21
28

Or, if you want it to work on any element (not just input), you can do something like the following for the jQuery snippet: $(document).keyup(function(e) { if (e.keyCode == 13) { $(':focus').trigger('enter'); } }); – Mike Desjardins Oct 17 '16 at 19:34

score 19 · Answer 2 · answered Dec 04 '13 at 07:08

19

You can add one more event to your events hash in AppView.

events: {
   "click #add-friend":  "showPrompt",
   "keyup #input-field-id" : "keyPressEventHandler"
}

Where #input-field-id is the one you want to add event on.

Then add eventHandler in AppView.

keyPressEventHandler : function(event){
    if(event.keyCode == 13){
        this.$("#add-friend").click();
    }
}

NOTE : This code is not tested but you can think doing it in this way.

Have a look at this to understand how Backbone handles events in a View.

answered Dec 04 '13 at 07:08

Niranjan Borawake

1,628
13
20

1

So I need to have two different functions? Keypress evennt handler and the show prompt.. hm guess that's okay, doesn't seem very DRY though – Melbourne2991 Dec 04 '13 at 07:09
You can think of calling `showPrompt` again on `keyup` with a check for `keyCode`. – Niranjan Borawake Dec 04 '13 at 07:17
Instead of triggering a `click` event on an `#add-friend`, simply calling `this.showPrompt()` would be enough. – Emile Bergeron Nov 10 '16 at 21:04
@Timofey what issue are you facing with this approach? – Niranjan Borawake Jul 27 '18 at 03:25
it simply didn't trigger the event for me, I spent some time trying to get it to work. I must have missed something, I can go back and try again sometime soon – Sasha Kondrashov Jul 27 '18 at 03:28

Backbone event firing on click OR press enter

2 Answers2

Linked