Question

I wonder why the this or $(this) selector isnt working when attaching functions to events in Backbone js. Look at this example code:

var testView = Backbone.View.extend({
    el: $('#test'),
    events: {
        'keyup #signup-fullname': 'validateFullname'
    },
    validateFullName: function(e){
        if($(this).val() == "mike"){
            alert('You are just amazing!');
        } else if($(this).val() == "tom"){
            alert("mmm.. you fail...")
        }
    }
});

It is not working and it only works if I do this:

var testView = Backbone.View.extend({
    el: $('#test'),
    events: {
        'keyup #signup-fullname': 'validateFullname'
    },
    validateFullName: function(e){
        if($('#signup-fullname').val() == "mike"){
            alert('You are just amazing!');
        } else if($('#signup-fullname').val() == "tom"){
            alert("mmm.. you fail...")
        }
    }
});

Isn’t that a bit of an overkill can it be done with this or $(this)?

Thanks

Answer 1

In backbone.js “this” is bound to the view object.

If you need to access the target element you can still do so through the event.target or event.targetElement. Have a look at this question
Backbone.js Event Binding