|
Hi all,
I'm an old C++ programer who has dabbled in web coding and javascript over the years. Lately I've been trying to get a handle on the mooTools framework for javascript. I'm having a bit of trouble understanding how javascript handles binding, or it may be a mootools binding thing, I'm not sure. Any insight is appreciated.
The following code works:
var myMenu = new Class({
initialize: function(elements, options){
<!-- <snip> -->
this.elements.each(
function(el,i){
var obj = this;
el.addEvent('mouseenter', function(evnt){
obj.menuOpen(i);
});
el.addEvent('mouseleave', function(evnt){
obj.menuOpen(null);
});
}.bind(this)
);
},
menuOpen(evnt, i) {
.... do menu stuff ....
}
<!-- <snip> -->
});
The anonymous function coded in-line with the call to addEvent works properly and my menu items open and close as expected. What I tried, because it looks better to my C++ trained eyes, and to see if I understood things correctly was this:
var myMenu = new Class({
initialize: function(elements, options){
<!-- <snip> -->
mouseEnter: function(evnt, i){
this.menuOpen(evnt, i);
},
mouseLeave: function(evnt){
this.menuOpen(null);
},
this.elements.each(
function(evnt,i){
var obj = this;
el.addEvent('mouseenter', obj.mouseEnter(evnt, i));
el.addEvent('mouseleave', obj.mouseLeave(evnt, i));
}.bind(this)
);
},
menuOpen(evnt, i) {
.... do menu stuff ....
}
<!-- <snip> -->
});
This does not work (nothing happens), yet to me it looks like it should. I'm pretty sure it has to do with binding the functions to the proper object in the addEvent calls (or something) but none of the things I've tried have worked.
If you can give some clues to help me understand what's going wrong here I'd appreciate it.
Thanks,
Steve
|
|
|
|