单击或按enter键时触发主干事件

Backbone event firing on click OR press enter

本文关键字：事件 enter 单击      更新时间：2024-02-15

我是主干网的新手，我正在寻找一种方法，当我按下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事件的定义方式不同吗？

假设您将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"
}

您可以在AppView中的events哈希中再添加一个event。

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

其中#input-field-id是要在其上添加事件的。

然后在AppView中添加eventHandler。

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

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

看看这个，了解Backbone是如何在View中处理events的。

相关文章：