Calling A Method In Mootools, The Correct Way?

I have created a class in mootools that when the initialize() method is first called it creates a div elements which is then appended to the document.body. I then attach a context menu handler which will call functions when an option from the context menu is selected in the browser.

The trouble I am having is that the context menu handler will not actually call any functions and I can't quite figure out why and was wondering if anyone here could spot the problem?

Here is the class I have created and the attached context-menu handler, some of the other code has been removed for brevity:

var uml_Canvas = new Class({  
    initialize: function()
    {
        this.mainCanvasDiv = document.createElement("div");
        this.mainCanvasDiv.id = "mainCanvas";
        this.mainAppDiv.appendChild(this.mainCanvasDiv);
        this.paper = Raphael(this.mainCanvasDiv.id, 500, 400);
        this.paper.draggable.enable();

        $("#"+this.mainCanvasDiv.id).contextMenu('canvasPanel_Menu', 
        {
            bindings: 
            {
                'clear': function(t) 
                {
                    this.clearPaper();
                }
            }
         });  
    },
    clearPaper : function()
    {
        this.paper.clear();
    }
});

So a quick overview, an object is created which creates a div and then appends it to the body. The div then has a context-menu assigned. When the 'clear' option is called the method clearPaper() should be called be for some reason it is not. If, ho开发者_JAVA百科wever, I replace the this.clearPaper(); line with a simple alert() call, it does indeed run.

Can anyone see a reason why it is not possible to call a method?

BTW the error I get is this.clearPaper is not a function if that helps.

Try binding "this" to your clear function:

'clear': function(t) 
{
    this.clearPaper();
}.bind(this)

This takes the "this" scope and allows the anonymous function to use it as if it were a member of that class.

Note that you have to do this whenever you try to use "this." inside of any anonymous function. For instance, if you have inside a class:

method: function() {
    button.addEvent('click', function(e) {
        new Request({
            onComplete: function(res) {
                this.process_result(res);
            }
        }).send();
    });
},
process_results: function(res) {...}

You have to bind all the way down:

method: function() {
    button.addEvent('click', function(e) {
        new Request({
            onComplete: function(res) {
                this.process_result(res);
            }.bind(this)
        }).send();
    }.bind(this));
},
process_results: function(res) {...}

Notice the new bind()s on the event function and the onComplete function. It may seem like an annoying extra step, but without doing this, you'd have scope free-for-all. Mootools makes it extremely easy to take your class scope and attach it to an anonymous function.