点击后触发骨干事件或按回车键

Question

我是骨干的新手,我正在寻找一种方法,当我按下Enter并点击时,我的按钮被触发.目前showPrompt仅在单击时执行.什么是最干净的DRYest方式,它也可以在按下时执行Enter,最好只用于输入字段.

(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; 

}());

另外,我在哪里可以阅读有关此类事件绑定的更多信息？骨干事件与JS或jQuery事件的定义有何不同？

Answer 1

假设你正在使用jQuery的DOM manipulation,你可以创建自己的"微型"的插件,将触发Enter的输入事件.将它放在您plugins.js或您拥有的任何设置脚本文件中:

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

现在您已经创建了这个"输入"插件,您可以通过这种方式收听事件:

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

Answer 2

您可以event在events哈希中添加一个AppView.

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

#input-field-id您要添加事件的人在哪里.

然后加eventHandler在AppView.

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

注意:此代码未经过测试,但您可以考虑以这种方式进行测试.

看看这个理解如何Backbone处理events的View.