Menu
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();
}
});
745
js trigger Event is used to invoke or callback the function for the given event or a space-delimited list of events. The subsequent arguments will be passed along to the event callbacks in order to trigger it. Parameter Values: event: It is used to bind an object with an event.
BackboneJS is a lightweight JavaScript library that allows to develop and structure the client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.
You can use the Backbone. Model without jQuery, but Backbone.
Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript and Underscore.js.
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/
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
