Question

So, I’ve started using Backbone.js to structure my javascript code and have modular applications, and I came across a problem reggarding events.

I want to make a simple View that handles forms and validates them. In the future I would like to add all the javascript functionallity like live validation, hover effects, etc.

This is the simplified code I have right now:

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');

The problem I had is that the validateFields function is not called when I submit the form. I also tried using this on the constructor:

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

Now, that last code works but the “this” inside the validation function would be the $(‘#formid’) object, instead of my Form object.

Answer 1

Try setting your el in other way:

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

In this case you can even remove initialize method (or change it):

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

As far as this code is concerned: this.el.bind('submit', this.validateFields);. If you want to preserve Form object context you should use binding:

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