在 JQuery UI 小部件中访问 .selector

我正在使用一个插件用户界面小部件工厂 http://blog.nemikor.com/2010/05/15/building-stateful-jquery-plugins/。使用基本的 JQuery 插件，我可以通过执行以下操作来访问所使用的选择器...

$.fn.pluginname = function(){
    var thisWorks = this.selector;
};

但是，当我使用小部件工厂时，通过“this.element”属性访问所选元素，并且“this.element.selector”的工作方式与我的第一个示例中的方式不同。有人有解决这个问题的好方法吗？我正在 GitHub 上查看小部件工厂源代码，但还没有找到任何东西。

诀窍是，在小部件工厂完成创建小部件之后，它本质上只是一个普通的插件。这意味着您可以进一步扩展它。

这个想法是保存原始函数，用自定义函数替换它并使其传递选择器。此代码可以位于小部件工厂之后和第一次使用对象之前的任何位置。调用后将其放入您的插件文件中即可$.widget().

本例中小部件的名称是test.

// Save the original factory function in a variable
var testFactory = $.fn.test;

// Replace the function with our own implementation
$.fn.test = function(obj){
    // Add the selector property to the options
    $.extend(obj, { selector: this.selector });

    // Run the original factory function with proper context and arguments
    return testFactory.apply(this,arguments);
};

这确保了this.selector作为命名选项传递。现在您可以通过引用在工厂内的任何地方访问它this.options.selector.

另外，我们不需要修改任何 jQuery UI 代码。