jQuery 从外部小部件访问小部件实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8506621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing widget instance from outside widget
提问by Anders
This is a simple widget mock:
这是一个简单的小部件模拟：
(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));
It only adds a method hide that you can call to hide the element. Easy if done from within widget
它只添加了一个方法 hide，您可以调用它来隐藏元素。如果在小部件中完成，则很容易
this.hide();
But a common scenario is that you want to call methods on a widget instance from the outside (Ajax update, or other external events)
但一个常见的场景是你想从外部调用小部件实例上的方法（Ajax 更新，或其他外部事件）
So what is the best way of accessing the widget instance? One way is to add the reference to the widget to the element, ugly...
那么访问小部件实例的最佳方式是什么？一种方法是将小部件的引用添加到元素中，丑陋...
_create: function () {
this.element[0].widget = this;
},
Then you can access it from the outside doing
然后你可以从外面访问它做
this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();
回答by Frédéric Hamidi
The widget engine already does what you want: it calls data()internally to associate the widgets and their respective elements:
小部件引擎已经做了你想要的：它在内部调用data()来关联小部件和它们各自的元素：
$("#dummy").myDummyWidget();
// Get associated widget.
var widget = $("#dummy").data("myDummyWidget");
// The following is equivalent to $("#dummy").myDummyWidget("hide")
widget.hide();
Update:From jQuery UI 1.9 onwards, the key becomes the widget's fully qualified name, with dashes instead of dots. Therefore, the code above becomes:
更新：从 jQuery UI 1.9 开始，键成为小部件的完全限定名称，用破折号代替点。因此，上面的代码变为：
// Get associated widget.
var widget = $("#dummy").data("ui-myDummyWidget");
Using unqualified names is still supported in 1.9 but is deprecated, and support will be dropped in 1.10.
1.9 中仍支持使用非限定名称，但已弃用，1.10 中将不再支持。
回答by Andy Braham
There is also a method created when a Widget is defined, you can simply call the instancemethod to get the actual Widget instance like so:
还有一个在定义 Widget 时创建的方法，您可以简单地调用该instance方法来获取实际的 Widget 实例，如下所示：
//Create the Instance
$("#elementID").myDummyWidget(options);
//Get the Widget Instance
var widget = $("#elementID").myDummyWidget("instance");
Or you can do it as a one-liner:
或者您可以将其作为单行：
var widget = $("#elementID").myDummyWidget(options).myDummyWidget("instance");
回答by Danack
You can also use the jQuery custom selector to find the widget elements before calling data on them to get the actual widget instance e.g.
您还可以使用 jQuery 自定义选择器来查找小部件元素，然后再调用它们的数据以获取实际的小部件实例，例如
$(this.element).find(":ui-myDummyWidget").each(function (index, domEle) {
var widgetObject = $(this).data("myDummyWidget");
widgetObject.hide();
// this == domEle according to the jQuery docs
});
That code finds all of the instances of ui.myDummyWidget (note the change of period . to hyphen - ) that have been created and attached to another widget holder.
该代码查找 ui.myDummyWidget 的所有实例（注意将句点 . 更改为连字符 - ），这些实例已创建并附加到另一个小部件持有者。
回答by Pittigghio
I'm not sure in which version it was introduced but, if all you wish to do is calling a widget's method you can use this:
我不确定它是在哪个版本中引入的，但是，如果您只想调用小部件的方法，则可以使用以下方法：
$("#myWidget").myDummyWidget("hide");
Where myWidgetis the id of the DOM element holding an instance of your widget. This will call the hidemethod.
其中myWidget是包含小部件实例的 DOM 元素的 id。这将调用隐藏方法。
If the method you need to call needs parameters you can pass them after the method name, like this:
如果您需要调用的方法需要参数，您可以在方法名称后传递它们，如下所示：
$("#myWidget").myDummyWidget("setSpecialAnswer",42);
Also, you can look for all instances of your widget using the special selector :widgetNameand call methods on them. The following code snippet will call the hidemethod on all myDummyWidgetwidgets.
此外，您可以使用特殊选择器:widgetName 查找小部件的所有实例并调用它们的方法。以下代码片段将调用所有myDummyWidget小部件上的hide方法。
$(":ui-myDummyWidget").myDummyWidget("hide");
Mind that the widget fullname is composed of a prefix ("ui" in the example) and the widget's name ("myDummyWidget") separated by a score ("-").
请注意，小部件全名由前缀（示例中的“ui”）和小部件的名称（“myDummyWidget”）组成，并由分数（“-”）分隔。
You should use your own prefix for your custom widgets; "ui" is generally reserved for jQueryUI pre-built widgets.
您应该为自定义小部件使用自己的前缀；“ui”通常保留给 jQueryUI 预构建的小部件。
I hope that helps. :)
我希望这有帮助。:)
