Question

所以，我已经开始使用Backbone.js来构建我的javascript代码并拥有模块化应用程序，并且我遇到了一个关注事件的问题。

我想创建一个处理表单并验证它们的简单视图。在将来，我想添加所有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 See comment in Backbone source

中的提交事件

一个简单的解决方法是将这行代码添加到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'});

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

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

BackboneJS：从视图提交表单上的触发器表单验证

2 个答案: