Acceso a instancia del widget de widget de fuera

Question

Este es un simple simulacro de widgets:

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

sólo añade una piel método que se puede llamar para ocultar el elemento. Fácil si se hace desde dentro widget de

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 de acceder a la instancia de widget? Una forma es añadir la referencia al widget para el elemento, feo ...

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

A continuación, se puede acceder a él desde el exterior haciendo

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

Answer 1

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

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

actualización: Desde jQuery UI 1.9 en adelante, the key becomes the widget's fully qualified name, with dashes instead of dots. Por lo tanto, el código anterior se convierte en:

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

El uso de nombres no cualificados aún se admite en 1,9, pero es obsoleto, y el apoyo será dado de baja en 1,10.

Answer 2

También puede usar el selector personalizado jQuery para buscar los elementos del widget antes de llamar a los datos para obtener la instancia del widget real, p.

$(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 se encuentra todas las instancias de ui.myDummyWidget (tenga en cuenta el cambio de periodo de guión -.) Que se han creado y unidos a otro titular de widgets.

Answer 3

no estoy seguro de qué versión se introdujo, pero, si todo lo que desea hacer es llamar al método de un widget se puede utilizar este:

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

Dónde MyWidget es el id del DOM elemento que contiene una instancia de tu widget. Esto llamará al ocultar el método.

Si el método es necesario llamar a las necesidades de los parámetros se pueden pasar después del nombre del método, así:

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

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

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

cuenta que el nombre completo widget de 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 está reservado para widgets preconfigurados de jQueryUI.

Espero que ayude. :)

Answer 4

También hay un método creado cuando se define un widget, sólo tiene que llamar al método instance para obtener la instancia Widget real de esta manera:

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

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

O puede hacerlo como uno liner:

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