从外部窗口小部件访问窗口小部件

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

更新:从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");