JQuery - Widget Public Methods

Question

Si je créer un widget JQuery (exemple de code ci-dessous), puis de définir un "public" de la méthode, est-il un autre moyen pour appeler la méthode à d'autres qu'à l'aide du formulaire ci-dessous?

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

Je voudrais créer une série de widgets qui définissent tous les mêmes méthodes (essentiellement la mise en œuvre de la même interface), et être en mesure d'appeler la méthode sans rien connaître du gadget je suis actuellement en invoquant la méthode sur. Dans la forme actuelle, j'ai besoin de savoir que je suis l'exécution de la méthode sur la "liste" widget.

---

Ci-dessous est un exemple de création d'un widget avec le "public" de la méthode.

 (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 jQuery $.de données(...) la méthode pour associer indirectement de la classe de widget avec l'élément du DOM. La meilleure façon d'appeler une méthode sur le widget est exactement ce qui a été décrit par Max...

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

...mais si vous voulez un champ de valeur de retour, vous aurez plus de chance de l'appeler de cette façon, par la méthode de données:

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

Cependant, l'utilisation de la seconde manière de côté-les étapes de l'ensemble de jQuery UI widget modèle, et devrait probablement être évitée si possible.

Answer 2

Légèrement hors sujet, je sais, mais vous voudrez peut-être regarder jquery Entwine .

Cela fournit une forme d'héritage et de polymorphisme qui permet un comportement intelligent avec du code simple. Il semble que cela ferait ce que vous essayez de faire.

Answer 3

disons que vous avez list , list2 et superList ... appelons "publicMethod" pour chacun d'eux:

 $.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 4

Essaye ça:

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

Answer 5

Cette solution est inspirée de la solution de @ Jiaaro, mais j'avais besoin d'une valeur de retour et implémentée en tant que fonction JavaScript plutôt que d'étendre jQuery:

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