如何从事件内部访问小部件选项？答案

【问题标题】：How do I access a widget options from inside an event?如何从事件内部访问小部件选项？
【发布时间】：2012-01-28 22:09:38
【问题描述】：

jQuery.widget("ui.test",{
    _init: function(){
        $(this.element).click(this.showPoint);
    },

    showPoint: function(E){
        E.stopPropagation();
        alert(this.options.dir);
    }
}

$('#someEleme').test();

现在，我编写 options 对象的方式未在 showPoint 中定义
事件处理程序。在 jQuery 小部件中传递此值的正确方法是什么？

【问题讨论】：

标签： javascript jquery jquery-plugins binding jquery-widgets

【解决方案1】：

它与调用showPoint 函数的上下文有关。在您的情况下，您已将函数提供给 jQuery 事件处理程序，这会导致 jQuery 在 event.target 元素的上下文中调用该函数。您可以使用jQuery.proxy() 覆盖它，在您的代码中看起来像这样：

jQuery.widget("ui.test",{
    _init: function(){
        $(this.element).click($.proxy(this.showPoint, this));
    },

    showPoint: function(E){
        E.stopPropagation();
        alert(this.options.dir);
    }
}

请注意，这将覆盖 showPoint 函数中的 this 变量，因此您不能再使用 $(this).hide() 之类的东西，而必须使用 $(E.target).hide() 或者实际上是 $(this.element).hide()。

【讨论】：

据我所知，它是编写小部件和各种工具时的方式。通常，widget 接口以.click(this.proxy(this.myClickhandler)) 之类的形式提供自己的代理方法，但它本质上是做同样的事情。
一些使用代理功能的 javscript/jQuery MVC 框架示例：jMVC，Spine。根据我的经验，可以说这确实是常见的方法。