Question

我在mootools中创建了一个类，当首次调用initialize（）方法时，它会创建一个div元素，然后将其附加到document.body。然后我附上一个上下文菜单处理程序，它将在浏览器中选择上下文菜单中的选项时调用函数。

我遇到的麻烦是上下文菜单处理程序实际上不会调用任何函数，我不知道为什么并且想知道这里是否有人能发现问题。

这是我创建的类和附加的上下文菜单处理程序，为简洁起见，已删除了其他一些代码：

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();
    }
});

因此，快速概述，创建一个对象，创建一个div，然后将其附加到正文。然后div分配了一个上下文菜单。当调用'clear'选项时，应该调用clearPaper（）方法，因为某些原因它不是。但是，如果我用简单的alert（）调用替换this.clearPaper();行，它确实会运行。

任何人都可以看到无法调用方法的原因吗？

感谢您的反馈。

如果有帮助，我得到的错误是this.clearPaper is not a function。

Answer 1

尝试将“this”绑定到您的clear函数：

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

这采用“this”范围并允许匿名函数使用它，就像它是该类的成员一样。

请注意，只要您尝试使用“this”，就必须执行此操作。在任何匿名函数内部。例如，如果你有一个类：

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

你必须完全绑定：

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) {...}

注意事件函数和onComplete函数的新bind（）。这可能看起来像是一个恼人的额外步骤，但如果不这样做，你就拥有了免费的范围。 Mootools使您可以非常轻松地获取类范围并将其附加到匿名函数。

在Mootools中调用方法，正确的方法？

1 个答案: