Home/ Questions/Q 7307877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T23:28:53+00:00

I need to bind two events in my backbone.js -view in order to toggle

  • 0

I need to bind two events in my backbone.js-view in order to toggle a menu. The idea is that if a button with the id #toggler is clicked the menu appears and any click outside the #menu element will hide the menu.

Unfortunately I cannot get this working with backbone’s event binding without having the outsideMenuHandler() called on every click regardless if I clicked on the #menu element, or not.

What should I change to make this work?

This is what I have done in backbone.js, which doesn’t work as intended:

myView = Backbone.View.extend({

    events: {
        'click #menu': 'insideMenuHandler',
        'click':       'outsideMenuHandler'
    }

    insideMenuHandler: function(e) {}, // Called when clicking #menu
    outsideMenuHandler: function(e) {} // Called on every click both on and off #menu

}

Just as a reference, here’s what I would do using jQuery alone:

$(document).click(function(event) {
    if ( $(event.target).closest('#menu').get(0) == null ) {
        $("#menu").slideUp();
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a couple things you need to sort out.

    First of all, if your insideMenuHandler returns false or calls e.stopPropogation() then your outsideMenuHandler won’t get called for clicks on #menu. For example:

    http://jsfiddle.net/ambiguous/8GjdS/

    But that’s not your whole problem. Your outsideMenuHandler will only be called for clicks on your view; so, if someone clicks on the page outside your view, your outsideMenuHandler won’t get called and your menu won’t go down. If you want the menu to go down when someone clicks anywhere outside #menu, then you’ll have to manually bind to body and manually unbind when your view is destroyed. Something like this:

    var myView = Backbone.View.extend({
    events: {
        'click #menu': 'insideMenuHandler'
    },

    initialize: function() {
        _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
    },

    render: function() {
        // Both <body> and <html> for paranoia.
        $('body, html').on('click', this.outsideMenuHandler);
        // ...
        return this;
    },

    remove: function() {
        // Clean up after ourselves.
        $('body, html').off('click', this.outsideMenuHandler);
        // ...
    },

    // ...
    outsideMenuHandler: function(e) {
        // ...
        return false;
    }
});

    and then be sure to properly remove your view. For example:

    http://jsfiddle.net/ambiguous/MgkWG/1/

    • 0