Question

我是骨干新手，当我按 Enter 并点击时，我正在寻找触发按钮的方法。目前showPrompt仅在单击时执行。按 Enter 执行它的最干净的DRYest方法是什么，最好只针对那个输入字段。

(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的{{1}}哈希中再添加一个events。

AppView

events: { "click #add-friend": "showPrompt", "keyup #input-field-id" : "keyPressEventHandler" }是您想要添加事件的地方。

然后在#input-field-id中添加eventHandler。

AppView

注意：此代码未经过测试，但您可以考虑以这种方式进行测试。

请查看this，了解keyPressEventHandler : function(event){ if(event.keyCode == 13){ this.$("#add-friend").click(); } } Backbone处理events的方式。

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

2 个答案: