jQuery-Métodos Públicos de Widget

Si creo un widget de jQuery (ejemplo de código a continuación) y luego defino un método "público", ¿hay otra forma de llamar al método que no sea usando el siguiente formulario? 

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

Me gustaría crear una serie de widgets que definan los mismos métodos (básicamente implementando la misma interfaz), y poder llamar al método sin saber nada sobre qué widget estoy invocando actualmente el método. En la forma actual, necesito saber que estoy ejecutando el método en el widget "lista".

A continuación se muestra un ejemplo de creación de un widget con el método "public".

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

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

        // My Public Methods
        publicMethod : function() { ... }
        ...
    });
}(jQuery));
Author: wattostudios, 2010-05-05
Source

6 answers

Los widgets de interfaz de usuario de jQuery usan $de jQuery.datos(...) método para asociar indirectamente la clase widget con el elemento DOM. La forma preferida de llamar a un método en el widget es exactamente lo que fue descrito por Max...

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

...pero si desea campo un valor devuelto, tendrá mejor suerte llamándolo de esta manera, a través del método de datos: 

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

Sin embargo, el uso de la segunda forma de pasos laterales todo el patrón de widget de interfaz de usuario de jQuery, y probablemente debería evitarse si es posible.

 22
Author: cdata,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-14 21:16:49

Un poco fuera de tema, lo sé, pero es posible que desee mirar jquery Entwine.

Esto proporciona una forma de herencia y polimorfismo que permite un comportamiento inteligente con código simple. Parece que esto haría lo que estás tratando de hacer.

 2
Author: Luke H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-15 03:05:56

Digamos que tienes list, list2, y superList... llamemos "publicMethod" on para cada uno de ellos:

$.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");
 1
Author: Jiaaro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-20 21:35:39

Esta solución está inspirada en la solución de @Jiaaro, pero necesitaba un valor de retorno e implementado como una función JavaScript en lugar de extender 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]();
            }
        }
    }
 0
Author: Curt Williams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-09 00:15:17

Prueba esto: 

$("#list").list("publicMethod");
 0
Author: Max Kramnik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-23 12:27:57

Qué tal este: 

$("#list").list.publicMethod

A medida que se extiende la interfaz de usuario.listar con su par clave: valor

 -2
Author: M A Hossain Tonu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-03 14:36:43