BackboneJS：从视图提交表单时触发表单验证

Question

因此，我开始使用Backbone.js来构造我的javascript代码并拥有模块化的应用程序，并且遇到了一些有关重新生成事件的问题。

我想制作一个简单的View，用于处理表单并验证它们。 将来，我想添加所有JavaScript功能，例如实时验证，悬停效果等。

这是我现在拥有的简化代码：

var Form = Backbone.View.extend({
    attributes: {
        att1 = 'att1',
        att2 = 'att2'
    },
    events: {
        'submit': 'validateFields'
    },
    initialize: function(element) {
        this.el = $(element);
    },
    validateFields: function() {
        alert(this.attributes.att1); //do something
        return false;
    }
});

var f = new Form('#formid');

我遇到的问题是，提交表单时未调用validateFields函数。 我也尝试在构造函数上使用它：

this.el.bind('submit', this.validateFields);

现在，最后一个代码可以工作了，但是验证函数中的“ this”将是$（'＃formid'）对象，而不是我的Form对象。

Answer 1

Backbone使用jQuery的delegate方法将事件绑定到events哈希中的回调。

不幸的是， delegate方法不适用于IE 中的Submit事件。 请参阅Backbone源中的注释。

一个简单的解决方法是将这行代码添加到render方法中。

render: function() {
  //render the view
  $(this.el).submit(this.validateFields);
}

您还需要在initialize方法中为validateFields绑定上下文。

initialize: function() {
  _.bindAll(this, 'render', 'validateFields');
}

Answer 2

尝试以其他方式设置您的el ：

var f = new Form({el: '#formid'});

在这种情况下，您甚至可以删除初始化方法（或更改它）：

var Form = Backbone.View.extend({
    // ...
    initialize: function() {
        // Some code
    },
    // ...
});

就此代码而言： this.el.bind('submit', this.validateFields); 。 如果要保留Form对象上下文，则应使用绑定：

this.el.bind('submit', _.bind(this.validateFields, this)); // using Underscore method
this.el.bind('submit', $.proxy(this.validateFields, this)); // using jQuery method