jquery - 从外部小部件访问小部件实例

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 开始，the key becomes the widget's fully qualified name, with dashes instead of dots 。因此，上面的代码就变成了:

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

1.9 中仍然支持使用非限定名称，但已弃用，并且在 1.10 中将不再支持。