el is undefined when event fires

Question

I trigger an event from one view like this:

select: function () {
    // Shorthand for the application namespace
    var app = brickpile.app;
    // Trigger the selected event
    app.trigger('selected', this.model);
}

and binds to the same event in another view:

initialize: function () {
    // Shorthand for the application namespace
    var app = brickpile.app;
    // bind to the selected event
    app.bind('selected', this.selected);
},

in my function I get the current instance el property?

selected: function (model) {
    // find the input hidden located in this views el
    $(this.el)... // is undefined
},

what have I missed?

Probably a scope problem, try app.bind('selected', this.selected, this); — nikoshr, Jun 02 '12 at 14:49
You could also `_.bindAll(this, 'selected')` in your `initialize` and not worry about the context argument to `bind`. — mu is too short, Jun 02 '12 at 16:06
@nikoshr - please provide answers as answers instead of comments — Derick Bailey, Jun 02 '12 at 20:16
@DerickBailey Typing a full blown answer on a virtual keyboard setup in french on a telephone screen can be tricky :) Here's my answer — nikoshr, Jun 03 '12 at 08:28

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I'll quote Backbone FAQ to answer your question

Binding "this"

Perhaps the single most common JavaScript "gotcha" is the fact that when you pass a function as a callback, its value for this is lost. With Backbone, when dealing with events and callbacks, you'll often find it useful to rely on _.bind and _.bindAll from Underscore.js.

When binding callbacks to Backbone events, you can choose to pass an optional third argument to specify the this that will be used when the callback is later invoked.

Try

app.bind('selected', this.selected, this);

or

_.bindAll(this, 'selected');
app.bind('selected', this.selected);

el is undefined when event fires

1 Answers1