使用输入骨干捕获表单提交事件

时间:2013-08-25 04:25:24

标签: javascript backbone.js

我的backbone.js表单有一个文本字段(没有提交按钮)。我需要在视图中捕获提交事件(使用enter键)。下面是示例代码。不知何故,按Enter键不会调用submit方法。相反,表单会重新加载。

脚本:

var FormView = Backbone.View.extend({
    el: '#form',

    events: {
        "submit": "submit",
    },

    initialize: function () {
        console.log("initialize");
    },

    submit: function (e) {
        e.preventDefault();
        console.log("submit");
    }
});

new FormView();

HTML:

<form id="form">
  <input type="text"/>        
</form>

2 个答案:

答案 0 :(得分:21)

将此添加到您的Backbone视图:

events: {
  'submit form': 'submit'
}

另请注意,在HTML中,必须定义表单操作。

如果您没有定义操作,请执行以下操作:

events: {
  'keyup': 'processKey'
}

processKey: function(e) { 
  if(e.which === 13) // enter key
    this.submit();
}

答案 1 :(得分:3)

如果您在捕获提交事件时遇到问题,请确保在您的视图中定义了“el”属性。

var myView = Backbone.View.extend({
    el: $(body), 
    events: {
       "submit form": "doMethod" 
    }, 
    doMethod: function(e) {
        e.preventDefault();  
        console.log('form fired');
    }  
});