Question

I’m using Class.js for creating classes.

I’m not getting the right context inside a method when invocked from a call back function

My code is

WordCloud = MyClass.extend({
    init: function(data) {
        var me = this;
        (......).on("onComplete", this.draw);
    },
    show: function(word) {
        alert(word)
    },
    draw : function(words){
        console.debug(this); // prints element that triggred `onComplete` action
        console.debug(words); // "Hi"
        console.debug(me); // me is not defined
        me.show(words) // Need to call this method
    }
});

Problem is draw method is fired when an action is completed, but inside draw method this is not the actual class instance, but the element that triggred the callback action.

I can’t pass exta arguments while calling this.draw as it is a call back function and onComplete has only one parameter.

How can I call the show method from draw?

Answer 1

If you do not have to support Internet Explorer 8 or lower, you can use bind():

init: function(data) {
    var me = this;
    (......).on("onComplete", this.draw.bind(this));
}

Otherwise, if you’re already using jQuery, you can leverage $.proxy(), which works the same way:

init: function(data) {
    var me = this;
    (......).on("onComplete", $.proxy(this.draw, this));
}