javascript - Backbone event firing on click OR press enter - Stack Overflow

admin管理员组

文章数量:1178543

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?

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?

• javascript
• jquery
• backbone.js
• backbone-events

Share Improve this question Follow edited Feb 11, 2021 at 9:21 Brian Tompsett - 汤莱恩 5,8737272 gold badges6161 silver badges133133 bronze badges asked Dec 4, 2013 at 4:19 Melbourne2991Melbourne2991 11.8k1212 gold badges4747 silver badges8282 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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"
}

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.

本文标签： javascriptBackbone event firing on click OR press enterStack Overflow