JQuery - Widget öffentliche Methoden

Question

Wenn ich ein JQuery-Widget (Codebeispiel unten) erstellen und dann eine "public" -Methode definieren, gibt es eine andere Möglichkeit, die Methode anders als das folgende Formular aufzurufen?

$("#list").list("publicMethod"); 

Ich mag würde eine Reihe von Widgets erstellen, die alle die gleichen Methoden (im Wesentlichen der Umsetzung die gleiche Schnittstelle) zu definieren, und in der Lage, die Methode zu nennen, ohne etwas zu wissen, über die Widget ich derzeit das Verfahren am Aufruf auf . In der aktuellen Form muss ich wissen, dass ich die Methode auf dem Widget "Liste" ausführe.

---

Unten finden Sie ein Beispiel zum Erstellen eines Widgets mit der "public" -Methode.

(function($) { 
    var items = []; 
    var itemFocusIdx = 0; 

    $.widget("ui.list", { 
     // Standard stuff 
     options : { ... }, 
     _create : function() { ... }, 
     destroy : function() { ... }, 

     // My Public Methods 
     publicMethod : function() { ... } 
     ... 
    }); 
}(jQuery)); 

Answer 1

jQuery UI-Widgets Verwenden Sie die $ .data (...) -Methode von jQuery, um die Widget-Klasse indirekt dem DOM-Element zuzuordnen. Der bevorzugte Weg, ein Verfahren auf das Widget zu nennen ist genau das, was von Max beschrieben wurde ...

$('#list').list('publicMethod'); 

... aber wenn Sie einen Rückgabewert Feld wollen, werden Sie mehr Glück haben es auf diese Weise aufrufen über die Daten Methode:

$('#list').data('list').publicMethod(); 

jedoch die zweite Art und Weise unter Verwendung von Seitenschritten das gesamte Form-Modell jQuery UI, und wahrscheinlich, wenn möglich, vermieden werden sollte.

Answer 2

Wie wäre es dieses:

$("#list").list.publicMethod 

Wie Sie mit Ihrem Schlüssel erweitern ui.list: Wertepaar Set

Answer 3

Try this:

$("#list").list("publicMethod"); 

Answer 4

Etwas off-topic, ich weiß, aber Sie möchten vielleicht jquery Entwine betrachten.

Dies stellt eine Form der Vererbung und Polymorphismus, die einige clevere Verhalten mit einfachen Code ermöglicht. Es klingt, als würde dies tun, was Sie versuchen zu tun.

Answer 5

können sagen, Sie haben list, list2 und superList ... lassen Sie uns auf für jeden von ihnen „publicMethod“ nennen:

$.fn.callWidgetMethod = function(method) { 
    var $this = this, 
     args = Array.prototype.slice.call(arguments, 1); 

    // loop though the data and check each piece of data to 
    // see if it has the method 
    $.each(this.data(), function(key, val) { 
    if ($.isFunction(val[method])) { 
     $this[key].apply($this, args); 

     // break out of the loop 
     return false; 
    } 
    }); 
} 

$("#some-element").list(); 
$("#another-element").list2(); 
$("#hydrogen").superList(); 

$("#some-element").callWidgetMethod("publicMethod"); 
$("#another-element").callWidgetMethod("publicMethod"); 
$("#hydrogen").callWidgetMethod("publicMethod"); 

Answer 6

Diese Lösung von @ Jiaaro Lösung inspiriert ist, aber ich brauchte einen Rückgabewert und implementiert als eine JavaScript-Funktion, anstatt jQuery zu erweitern:

var invokeWidgetMethod = function(methodName, widgetElem) 
    { 
     var $widgetElem = $(widgetElem), 
      widgetData = $widgetElem.data(), 
      dataName, 
      dataObject; 

     for(dataName in widgetData) 
     { 
      dataObject = widgetData[dataName]; 
      if ($.isFunction(dataObject[methodName])) { 
       return dataObject[methodName](); 
      } 
     } 
    }