Доступ к экземпляру виджета из внешнего виджета

Это простой макет виджетов:

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

Ответы

Ответ 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.

Ответ 2

Вы также можете использовать пользовательский селектор 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(обратите внимание на изменение периода. на дефис -), которые были созданы и прикреплены к другому держателю виджета.

Ответ 3

Я не уверен, в какой версии он был введен, но если все, что вы хотите сделать, это вызов метода виджетов, вы можете использовать это:

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

Где myWidget - это идентификатор элемента DOM, содержащий экземпляр вашего виджета. Это вызовет метод hide.

Если метод, который вам нужно вызвать, требует параметров, вы можете передать их после имени метода, например:

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

Кроме того, вы можете искать все экземпляры вашего виджета, используя специальный селектор: widgetName и методы вызова на них. Следующий фрагмент кода вызовет метод hide для всех виджетов myDummyWidget.

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

Помните, что полное имя виджета составлено из префикса ( "ui" в примере) и имени виджета ( "myDummyWidget" ), разделенного счетом ( "-" ).

Вы должны использовать свой собственный префикс для своих пользовательских виджетов; "ui" обычно зарезервирован для предварительно созданных виджетах jQueryUI.

Надеюсь, это поможет.:)

Ответ 4

Существует также метод, созданный при определении виджета, вы можете просто вызвать метод instance для получения фактического экземпляра виджета следующим образом:

//Create the Instance
$("#elementID").myDummyWidget(options);

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

Или вы можете сделать это как однострочный:

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