Backbone JS event on document click

Asked By: Anonymous

I’m new to working with Backbone JS and I’m creating a Backbone View. I made this View so when you click the template it calls function highlight to add the highlight class to my element:

var PlayerView = Backbone.View.extend({

    // ...

    events: {
        "click .player": "highlight"
    },

    // ...

    highlight: function () {
        this.$el.find('.player').addClass('highlight');
    }

});

I want to make it so when I click anywhere else in the application, I remove the highlight class from this element.

I could declare a click handler on the document and remove the highlight class from there:

$(document).click(function () {
    $('.player.highlight').removeClass('highlight');
});

And then use event.stopPropagation() in the highlight function to prevent bubbling:

var PlayerView = Backbone.View.extend({

    // ...

    highlight: function (evt) {
        evt.stopPropagation();
        this.$el.find('.player').addClass('highlight');
    }
});

This works and exhibits the functionality I’m looking for. However this doesn’t exactly leverage the backbone framework. Is there a proper way of doing this in Backbone JS?

Solution

Answered By: Anonymous

A Backbone View’s events hash only looks at things within that view’s $el.

If you want to remove the highlight of a player when another player is clicked, you can have your player views rendered within a player collection view, which can watch for click events. You could then:

handleClick: function(e) { 
    this.$(".player").removeClass('highlight');
    this.$(e.currentTarget).addClass('highlight');
}

If you want to handle all clicks regardless of whether they occur within a Backbone.View’s $el, then you probably do want to use a global handler.

Note, untested.

If you post details of the structure of your application perhaps a better solution could be suggested.