How do I get the 'this' element in Backbone click event?

Question

When I click something, I'd like to do something to that element (i.e. add a class), though I don't believe that this 'this' element in my event handler is actually that element. Here is a sample bit of my code:

var ApplicationRouter = Backbone.Router.extend({

    routes: {
        "": "home",
        "firstthing": "firstthing",
    },

    firstthing: function() {
        $(this).addClass('active');
    }
});

var ApplicationView = Backbone.View.extend({

    el: $('body'),

    events: {
        'click #something': 'displayFirstThing'
    },

    initialize: function(){
        this.router = new ApplicationRouter();
        Backbone.history.start();
    },

    displayFirstThing: function(){
        this.router.navigate("firstthing", true);
    },
});

new ApplicationView();

I'm wanting to add the class of 'active' to #something. I'll have more events that will have different classes etc, but looking to get some of the basics down now.

Also, accepting any suggestions on code structure!

You might try checking the `argument`s to the displayFirstThing function. Backbone might be passing the `event` object, in which case you could try using `event.target` or `event.currentTarget`. — Greg Burghardt, Nov 20 '14 at 17:26
This is a good tip @GregBurghardt. So I see that `event.CurrentTarget` is the element I'm looking for, but is this being passed into my `firstthing` function? — , Nov 20 '14 at 17:34
@GregBurghardt or I guess I'm wondering, is there a way to use `event.currentTarget` in my `firstthing` function? — , Nov 20 '14 at 17:45
The `event.currentTarget` property should be the target of the delegated event. In your case, I think `event.currentTarget.id` should be `"something"`. Your code could be: `event.currentTarget.classList.add("active")`. Is your displayFirstThing method getting the event object as an argument? I'm just curious. I haven't used Backbone outside of experimenting with it. — Greg Burghardt, Nov 20 '14 at 17:50
You're right, my `event.currentTarget.id` is `something`. I used `console.log(event.currentTarget.id)` in my `displayFirstThing` function and I get the value `something`. And it does work to use `event.currentTarget.classList.add("active")` in my displayFirstThing method, but now I'm wondering what the purpose of my `firstthing` method is at all? Like why not have all that code in my `displayFirstThing` method? — , Nov 20 '14 at 17:58

score 3 · Accepted Answer · edited Feb 01 '19 at 20:19

Backbone passes the event object as the first argument to the callback from which you can use the currentTarget property to work with the element that received the event. E.g.

var ApplicationView = Backbone.View.extend({

    el: $('body'),

    events: {
        'click #something': 'displayFirstThing'
    },

    // ... other code

    displayFirstThing: function( event ){
        $( event.currentTarget ).addClass( 'active' );
    },
});

score 0 · Answer 2 · answered Nov 21 '14 at 08:25

I would suggest to store the elements that you want to access in view properties.

i.e.

var ApplicationView = Backbone.View.extend({

    el: $('body'),

    events: {
        'click #something': 'displayFirstThing'
    },

    render: function() {
      // render the view
      // store the link element in a property
      this.$something = this.$('#something');
    },

    displayFirstThing: function(){
        this.$something.addClass('someclass');
    },
});

do you think it is more appropriate to do these types of actions in the view or router? — , Nov 21 '14 at 14:28

How do I get the 'this' element in Backbone click event?

2 Answers2