2010-05-05 13 views
29

Si creo un widget JQuery (ejemplo de código a continuación), y luego defino un método "público", ¿hay alguna otra manera de llamar al método que no sea usar el siguiente formulario?JQuery - Widget Public Methods

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

me gustaría crear una serie de widgets que definen a todos los mismos métodos (básicamente la aplicación de la misma interfaz), y ser capaz de llamar al método sin saber nada de lo que widget Yo actualmente estoy invocando el método de . En la forma actual, necesito saber que estoy ejecutando el método en el widget de "lista".


A continuación se muestra un ejemplo de cómo crear un widget con el método "público".

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

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

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

¿Tienen que usar $ .widget, o están abiertos a usar la herencia y $ .fn? – balupton

Respuesta

22

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

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

... pero si quieres al campo un valor de retorno, tendrá mejor suerte llamando de esta manera , a través del método de datos:

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

Sin embargo, utilizando la segunda forma de lado a los pasos todo el patrón de aparato jQuery UI, y probablemente se debe evitar si es posible.

-2

¿Qué tal este:

$("#list").list.publicMethod 

Como está extendiendo ui.list con su clave: pareja de valores establecidos

+0

Parece que no funciona – thomaux

0

Prueba esto:

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

Esto es exactamente lo que el OP intenta no hacer ... – thomaux

2

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

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

1

Digamos que tiene list, list2 y superList ... vamos a llamar "publicMethod" en 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"); 
0

Esta solución es inspirada por @ solución de Jiaaro, pero necesitaba un valor de retorno e implementado como una función de 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](); 
      } 
     } 
    }