从外部访问小部件实例

Question

这是一个简单的小部件模拟:

(function ($) {
    $.widget("ui.myDummyWidget", {
        options: {
        },
        _create: function () {
        },
        hide: function () {
            this.element.hide();
        },
        _setOption: function (key, value) {
            $.Widget.prototype._setOption.apply(this, arguments);
        },
        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }
    });
} (jQuery));

它只添加了一个方法hide，你可以调用该方法来隐藏元素。在小部件内完成很容易

this.hide();

但是一个常见的场景是，您希望从外部(Ajax更新或其他外部事件)调用小部件实例上的方法

那么访问小部件实例的最佳方式是什么呢?一种方法是将小部件的引用添加到元素中，丑…

_create: function () {
    this.element[0].widget = this;
},

然后你可以通过

从外部访问它

this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();

Answer 1

小部件引擎已经做到了您想要的:它在内部调用data()来关联小部件和它们各自的元素:

$("#dummy").myDummyWidget();
// Get associated widget.
var widget = $("#dummy").data("myDummyWidget");
// The following is equivalent to $("#dummy").myDummyWidget("hide")
widget.hide();

Update:从jQuery UI 1.9开始，键成为小部件的完全限定名，用破折号代替点。因此，上面的代码变成:

// Get associated widget.
var widget = $("#dummy").data("ui-myDummyWidget");

在1.9中仍然支持使用非限定名，但已弃用，并将在1.10中取消支持。

Answer 2

在定义Widget时还创建了一个方法，您可以简单地调用instance方法来获取实际的Widget实例，如下所示:

//Create the Instance
$("#elementID").myDummyWidget(options);
//Get the Widget Instance
var widget = $("#elementID").myDummyWidget("instance");

或者您可以使用一行代码:

var widget = $("#elementID").myDummyWidget(options).myDummyWidget("instance");

Answer 3

您也可以使用jQuery自定义选择器在调用数据之前找到小部件元素，以获得实际的小部件实例，例如

$(this.element).find(":ui-myDummyWidget").each(function (index, domEle) {
    var widgetObject = $(this).data("myDummyWidget");
    widgetObject.hide();
    // this == domEle according to the jQuery docs
});

这段代码找到ui的所有实例。myDummyWidget(注意周期的变化)。

Answer 4

我不确定它是在哪个版本引入的，但是，如果你想做的只是调用一个小部件的方法，你可以使用这个:

$("#myWidget").myDummyWidget("hide");

其中myWidget是存放小部件实例的DOM元素的id。这将调用hide方法。

如果你需要调用的方法需要参数，你可以在方法名之后传递参数，像这样:

$("#myWidget").myDummyWidget("setSpecialAnswer",42);

另外，您可以使用特殊选择器:widgetName查找小部件的所有实例并调用它们的方法。下面的代码片段将在所有myDummyWidget小部件上调用hide方法。

$(":ui-myDummyWidget").myDummyWidget("hide");

请注意，小部件全名由前缀(在示例中为"ui")和小部件名称("myDummyWidget")组成，中间用分数("-")分隔。

您应该使用自己的前缀为您的自定义小部件;"ui"通常是为jQueryUI预构建的小部件保留的。

我希望这对你有帮助。:)