jquery - content - Accediendo a la instancia del widget desde un widget externo

widget javascript

Question

Este es un simple simulacro de widget:

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

Solo agrega un método oculto al que puedes llamar para ocultar el elemento. Fácil si se hace desde dentro del widget

this.hide();

Pero un escenario común es que desea llamar a métodos en una instancia de widget desde el exterior (actualización Ajax u otros eventos externos)

Entonces, ¿cuál es la mejor manera de acceder a la instancia del widget? Una forma es agregar la referencia al widget al elemento, feo ...

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

Entonces puedes acceder desde el exterior haciendo

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

Answer 1

El motor de widgets ya hace lo que usted desea: llama a data() internamente para asociar los widgets y sus elementos respectivos:

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

Actualización: a partir de jQuery UI 1.9, la clave se convierte en el nombre completo del widget, con guiones en lugar de puntos . Por lo tanto, el código anterior se convierte en:

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

El uso de nombres no calificados todavía se admite en 1.9, pero está en desuso y el soporte se eliminará en 1.10.

Answer 2

No estoy seguro de en qué versión se introdujo, pero si todo lo que desea hacer es llamar al método de un widget, puede usar esto:

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

Donde myWidget es el id del elemento DOM que contiene una instancia de su widget. Esto llamará el método de ocultar .

Si el método al que necesita llamar necesita parámetros, puede pasarlos después del nombre del método, como este:

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

Además, puede buscar todas las instancias de su widget utilizando el selector especial : widgetName y los métodos de llamada en ellos. El siguiente fragmento de código llamará al método hide en todos los widgets de myDummyWidget .

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

Tenga en cuenta que el nombre completo del widget se compone de un prefijo ("ui" en el ejemplo) y el nombre del widget ("myDummyWidget") separados por una puntuación ("-").

Debe usar su propio prefijo para sus widgets personalizados; "ui" generalmente se reserva para los widgets precompilados de jQueryUI.

Espero que eso ayude. :)

Answer 3

También hay un método creado cuando se define un Widget, simplemente puede llamar al método de instance para obtener la instancia real del Widget de esta manera:

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

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

O puedes hacerlo como una sola línea:

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

Answer 4

También puede usar el selector personalizado jQuery para encontrar los elementos del widget antes de llamar los datos para obtener la instancia del widget real, por ejemplo

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

Ese código encuentra todas las instancias de ui.myDummyWidget (tenga en cuenta el cambio de período. A guión -) que se han creado y adjuntado a otro titular de widget.