点击或按下Enter时，Backbone事件触发。

Question

我是新手，正在学习backbone。我希望找到一种方法，在我点击按钮的同时也可以通过按下Enter来触发它。目前只有在单击时才执行showPrompt。有没有最简洁、最DRY的方法让它在按下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; 

}());

我在哪里可以阅读更多关于这种事件绑定的信息？Backbone事件与JS或jQuery事件在定义方式上有什么不同吗？

- Melbourne2991

Answer 1

假设您正在使用 jQuery 进行 DOM 操作，您可以创建自己的 "微型" 插件，在输入时触发 "Enter" 事件。将其放置在您的 plugins.js 或任何设置脚本文件中。

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

现在您已经创建了这个“enter”插件，您可以通过以下方式监听enter事件:

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

- Daniel Aranda

---

或者，如果你想让它在任何元素上都起作用（而不仅仅是输入框），你可以使用以下 jQuery 代码片段：$(document).keyup(function(e) { if (e.keyCode == 13) { $(':focus').trigger('enter'); } }); - Mike Desjardins

Answer 2

您可以在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。

- Niranjan Borawake

---

所以我需要有两个不同的函数？Keypress事件处理程序和显示提示... 嗯，猜这没问题，但似乎不太DRY。 - Melbourne2991

你可以考虑在 keyup 事件上再次调用 showPrompt，并检查 keyCode。 - Niranjan Borawake

不需要在 #add-friend 上触发 click 事件，只需调用 this.showPrompt() 即可。 - Emile Bergeron

@Timofey，您使用这种方法遇到了什么问题？ - Niranjan Borawake

它对我来说根本没有触发事件，我花了一些时间尝试让它工作。我一定是漏掉了什么，我可以很快回去再试一次。 - Sasha Kondrashov