Accesso widget di esempio da widget di fuori

Question

Questo è un widget semplice finto:

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

ma aggiunge solo una pelle metodo che è possibile chiamare per nascondere l'elemento. Facile se fatto all'interno widget di

this.hide(); 

Ma uno scenario comune è che si desidera chiamare metodi su un'istanza widget di dall'esterno (aggiornamento Ajax, o altri eventi esterni)

Allora, qual è il modo migliore di accedere all'istanza del widget? Un modo è quello di aggiungere il riferimento al widget all'elemento, brutto ...

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

Quindi è possibile accedervi dall'esterno fare

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

Answer 1

Il motore di widget di già non ciò che si vuole: chiama data() internamente per associare i widget ei loro rispettivi elementi:

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

Aggiornamento: Da jQuery UI 1.9 in poi, the key becomes the widget's fully qualified name, with dashes instead of dots. Pertanto, il codice diventa sopra:

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

Usando nomi non qualificati è ancora supportata in 1.9, ma è deprecato, e il supporto verrà abbandonato a 1.10.

Answer 2

È inoltre possibile utilizzare il selettore personalizzato jQuery per trovare gli elementi del widget prima di chiamare i dati su di essi per ottenere l'istanza del widget effettiva, ad es.

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

Quel codice trova tutte le istanze di ui.myDummyWidget (notare il cambiamento del periodo trattino -.) Che sono stati creati e collegati a un altro titolare di widget.

Answer 3

non sono sicuro di quale versione è stato introdotto, ma, se tutto quello che vuole fare è chiamare il metodo di un widget è possibile utilizzare questo:

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

Dove myWidget è l'id del DOM elemento contenente un'istanza del tuo widget. Questo chiamerà il metodo nascondi.

Se il metodo è necessario chiamare esigenze parametri è possibile passare, dopo il nome del metodo, in questo modo:

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

Inoltre, è possibile cercare tutte le istanze del tuo widget utilizzando l'apposito selettore : widgetName e chiama i metodi su di essi. Il seguente frammento di codice chiamerà il metodo nascondi su tutti i widget myDummyWidget.

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

mente che il widget fullname è composto da un prefisso ("ui" nell'esempio) e il nome del widget ("myDummyWidget") separati da un punteggio ("-").

È necessario utilizzare il proprio prefisso per i widget personalizzati; "ui" è generalmente riservato ai widget precompilati di jQueryUI.

Spero che questo aiuti. :)

Answer 4

C'è anche un metodo creato quando un Widget è definita, si può semplicemente chiamare il metodo instance per ottenere l'attuale istanza Widget in questo modo:

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

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

Oppure si può fare come un one liner:

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