11

I'm trying to rewrite a Mootools tooltip class in JQuery using this class plugin. When my class is instantiated I'm attaching an event listener to a target link which will fade out the tooltip.

In event callbacks JQuery assigns the keyword "this" to the target of the event, so to keep a reference to the properties of the class I'm using apply() to set "this" to mean the class instance. This is apparently the counterpart in JQuery of Mootools' handy bind() function.

Unfortunately when I use apply() I lose the callback's event parameter. For example, in this bit I get an "e is undefined" error on the second line.

this.target.bind('click', function(e){
    e.preventDefault();
    var tip = this.opts.tip;
    tip.fadeOut(500, function(){
        tip.bind('click', function(){
            showing = false;
        })
    });
}.apply(this))

Am I missing a trick here? Does anybody know a way around this issue?

Improve this question

2 Answers 2

Reset to default
19

TBH, the mootools .bind as you call it is just Function.bind in ES5 - and is available natively in browsers that support the js 1.8.5 + spec. MooTools just enhances browsers that don't have it yet but lets the native implementation remain on the prototype - if available.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind

You can easily implement that as a a Function.prototype.bind decorator if not available natively and use it as the example above says:

// Function.prototype.bind polyfill
if ( !Function.prototype.bind ) {

  Function.prototype.bind = function( obj ) {
    if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');

    var slice = [].slice,
        args = slice.call(arguments, 1), 
        self = this, 
        nop = function () {}, 
        bound = function () {
          return self.apply( this instanceof nop ? this : ( obj || {} ), 
                              args.concat( slice.call(arguments) ) );    
        };

    bound.prototype = this.prototype;

    return bound;
  };
}

As you can see, it's a little more involved than a simple .apply / .call

One thing to consider is, if you NEED to use bind or if you can save a reference instead.

eg.

var self = this;
this.target.bind("click", function(e) {
    var tip = self.opts.tip;
});

this has a smaller footprint than the function binding anyway. it also affords you a correct reference to this as the trigger element (event.target === this). you will find this pattern far more often in mootools-core than the bind one - though bind is often needed when you want to assign events to class methods, eg:

this.element.addEvents({
    click: this.showTip.bind(this),
    mouseleave: this.hideTip.bind(this)
});

In this case, saving a reference won't work though you can rewrite it as 

var self = this;
this.element.addEvents({
    click: function(e) {
        self.showTip(e);
    }
});

A jQuery particular implementation is proxy - http://api.jquery.com/jquery.proxy/

Improve this answer
2
  • Dimitar you're a walking encyclopaedia of JS! Thanks for the detailed explanation. In this situation your suggestion of a reference seems to be the best, so I'd do like: ` var self = this; this.target.bind('click', function(e){ e.preventDefault(); self.toggleTip(); })` in my init method, where toggleTip() is a separate click callback. Great advice, thanks!
    – And Finally
    Commented Jun 12, 2011 at 11:20
  • @Dimitar: Works great indeed. thnx. (at)all: Notice that this technique of functional programming is called currying (dustindiaz.com/javascript-curry). jQuery has similar prototype extension of the method name 'bind' which maybe somewhat confusing because it is used for events handling and declared on non-functions. In jQuery there is also a use of context in $.ajax for similar purpose.
    – Yauhen Yakimovich
    Commented Apr 8, 2012 at 21:59
0

All events, that are made on some element (e.g. 'click' is one of them) should have a target property pointing to that element

var $this = $(e.target); // $this will be the clicked element

JSFiddle

Improve this answer
1
  • Thanks mkilmanas - that's the property I was hoping to use. Unfortunately when I added apply() to the end of my function I lost access to it.
    – And Finally
    Commented Jun 12, 2011 at 11:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.