Dostęp widget instancji z zewnątrz widget

Question

Jest to prosty widżet makiety:

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

Dodaje jedyną metodą ukrycia, że ​​można zadzwonić, aby ukryć element. Łatwe, jeśli odbywa się od wewnątrz widget

this.hide(); 

Ale wspólny scenariusz jest to, że chcesz wywołać metody na widżet przykład z zewnątrz (aktualizacji Ajax i innych zdarzeń zewnętrznych)

Więc co jest najlepszym sposobem dostępu do instancji widgetu? Jednym ze sposobów jest dodanie odniesienia do widgetu do elementu, brzydkie ...

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

Następnie można uzyskać do niego dostęp z zewnątrz robi

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

Answer 1

Już silnik widget jest to, co chcesz: wzywa data() wewnętrznie skojarzyć widżetów i ich poszczególne elementy:

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

Aktualizacja: Od jQuery UI 1.9 i nowsze, the key becomes the widget's fully qualified name, with dashes instead of dots. Dlatego powyższy kod staje:

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

Korzystanie niekwalifikowanych nazw jest nadal obsługiwana w 1,9 ale jest przestarzała, a wsparcie będzie spadła w 1.10.

Answer 2

Można również użyć niestandardowego selektora jQuery, aby znaleźć elementy widżetu przed wywołaniem danych na nich, aby uzyskać rzeczywistą instancję widgetu, np.

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

Ten kod wyszukuje wszystkie instancje ui.myDummyWidget (uwaga na zmianę okresu myślnikiem -.), Które zostały utworzone i dołączone do innego posiadacza widget.

Answer 3

nie jestem pewien, w którym wersja została wprowadzona, ale jeśli wszystko co chcesz zrobić jest wywołanie metody widżet może użyć tego:

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

Gdzie MyWidget jest id DOM element zawierający instancję widgetu. Spowoduje to wywołanie metody hide.

Jeśli metoda trzeba zadzwonić potrzeb parametry można przekazać je po nazwie metody, na przykład:

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

Również można szukać wszystkich wystąpień widżetu przy użyciu specjalnego przełącznika : widgetName i metody połączeń na nich. Poniższy fragment kodu będzie wywoływał metodę ukrywania we wszystkich widgetach myDummyWidget.

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

uwagę, że pełna nazwa widget jest złożony z przedrostka („Ul” w tym przykładzie) i nazwa widgetu („myDummyWidget”), oddzielone przez nacięcie („-”).

Powinieneś użyć własnego prefiksu do własnych widżetów; "ui" jest ogólnie zarezerwowane dla gotowych widgetów jQueryUI.

Mam nadzieję, że to pomaga. :)

Answer 4

Istnieje również metoda stworzona gdy widżet jest zdefiniowana, można po prostu wywołać metodę instance uzyskać rzeczywiste wystąpienie Widget tak:

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

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

Albo można to zrobić jako jedno- liniowa:

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