Accediendo .selector dentro de un widget de IU de JQuery

Question

Estoy trabajando en un complemento usando el ui widget factory. Con un plugin jQuery básica, puedo acceder al selector utilizado al hacer algo como esto ...

$.fn.pluginname = function(){ 
    var thisWorks = this.selector; 
}; 

Sin embargo, cuando se utiliza la fábrica de widget, se accede al elemento seleccionado a través de la 'this.element' propiedad, y 'this.element.selector' no funciona de la misma manera que en mi primer ejemplo. Alguien tiene una buena manera de evitar esto? Estoy mirando el código fuente de la fábrica de widgets en GitHub, pero todavía no he podido encontrar nada.

Answer 1

El truco es que una vez que la fábrica de widgets ha completado la creación de su widget, es básicamente un plugin normal después. Eso significa que puedes extenderlo más.

La idea es guardar la función original, reemplazarla por una función personalizada y hacer que pase el selector. Este código puede estar en cualquier lugar después de la fábrica del widget y antes de usar su objeto la primera vez. Simplemente colóquelo en su archivo de complemento después de llamar al $.widget().

El nombre del widget en este ejemplo es test.

// Save the original factory function in a variable 
var testFactory = $.fn.test; 

// Replace the function with our own implementation 
$.fn.test = function(obj){ 
    // Add the selector property to the options 
    $.extend(obj, { selector: this.selector }); 

    // Run the original factory function with proper context and arguments 
    return testFactory.apply(this,arguments); 
}; 

Esto asegura que this.selector se pasa a través como una opción de llamada. Ahora puede acceder a él en cualquier lugar dentro de su fábrica haciendo referencia al this.options.selector.

Como una ventaja adicional, no tuvimos que hackear ningún código de UQ jQuery.

Answer 2

También es posible simplemente utilizar

this.selector = '#'+this.element.attr('id'); 

por lo general en el método _create. Por supuesto, esto requiere que cada instancia de su widget tenga un ID único, que por lo general debería ser de todos modos.

Answer 3

Solo mi pareja de centavos ... aquí está trabajando JSFiddle ejemplo basado en la respuesta de DarthJDG ... Probablemente alguien lo necesitará.

$(function() { 
    $.widget("test.testwidget", { 
     _create: function() { 
      this.element.text('Selector: ' + this.options.selector) 
     }, 
    }); 
}(jQuery)); 

// Save the original factory function in a variable 
var testFactory = $.fn.testwidget; 

// Replace the function with our own implementation 
$.fn.testwidget = function(obj){ 
    // Add the selector property to the options 
    $.extend(obj, { selector: this.selector }); 

    // Run the original factory function with proper context and arguments 
    return testFactory.apply(this,arguments); 
}; 

$(document).ready(function() { 
    $('#test').testwidget({}); 
    $('.test').testwidget({}); 
});