0

因此，我开始使用 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 对象。

4

2 回答 2

3

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

不幸的是，该delegate方法不适用于 IE 中的提交事件请参阅 Backbone 源中的评论

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

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

您还需要在初始化方法中为 validateFields 绑定上下文

initialize: function() {
  _.bindAll(this, 'render', 'validateFields');
}
于 2011-12-30T13:27:40.900 回答
0

尝试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
于 2011-12-30T13:14:16.523 回答