jQuery Plugin Authoring - Establecer diferentes opciones para diferentes elementos

Question

He creado un plugin jQuery que funciona muy bien, con la excepción de poder llamar al plugin en diferentes objetos y cada objeto conservando las opciones que se le dieron. El problema es que si llamo el plug-in en un objeto, por ejemplo:

$('#myDiv1').myPlugin({ 
    option1: 'some text', 
    option2: true, 
    option3: 'another option value' 
}); 

luego llamar al plug-in de nuevo en otro objeto, por ejemplo:

Entonces, si vuelvo y trato de hacer algo con # myDiv1 que las necesidades de sus opciones originales que aún estaba intacta, es decir:

$('#myDiv1').myPlugin.update(); 

no tendrá sus opciones originales, sino que será anulado por las opciones de # myDiv2. ¿Cuál es la forma correcta de hacer esto para que cada objeto retenga las opciones originales que se le asignaron? (Y esto es un código de ejemplo de lo que estoy haciendo en el plug-in)

(function($) { 
$.fn.myPlugin = function(options) { 

    // build main options before element iteration 
    var opts = $.extend({}, $.fn.myPlugin.defaults, options); 

    _option1 = opts.option1; 
    _option2 = opts.option2; 
    _option3 = opts.option3; 

    // iterate all matched elements 
    return this.each(function() { 
     callPluginFunctions(this, opts); 
    }); 

}; 

    ....code continued.... 

Comprendo que esto es algún tipo de corrupción del alcance o algo así. Entonces, ¿cómo puedo obtener mis opciones para permanecer adjunto y permanecer en el alcance del objeto original (es decir, # myDiv1) que se les dio.

EDIT: Al hacer algunas investigaciones veo que puede almacenar datos en un objeto usando la función .data de jQuery, y los documentos dicen que jQuery UI lo usa extensamente. ¿Sería lo correcto hacer aquí almacenar las opciones en el objeto utilizando .data, luego, cuando se hace referencia más tarde utilizar las opciones almacenadas en .data ???

Answer 1

En primer lugar, generalmente querrá manejar el comando dentro de su método de extensión. En segundo lugar, se debe a conectar configuraciones para cada elemento ...

(function($){ 
var defaultOptions = { /* default settings here */ }; 

//called on the native object directly, wrap with $(obj) if needed. 
function initializeObject(obj, options) { 
    //assign the options to the object instance. 
    $(obj).data('myPlugin-options', $.extend(defaultOptions, options)); 
    //do other initialization tasks on the individual item here... 
} 

function updateObject(obj) { 
    // use $(obj).data('myPlugin-options'); 
} 

function setOption(obj, key, value) { 
    var d = $(obj).data('myPlugin-options'); 
    d[key] = value; 
    $(obj).data('myPlugin-options', d); 
} 

$.fn.myPlugin = function(command, option, val) { 
    if (typeof command == "object") { 
    //initialization 
    return this.each(function(){ 
     initializeObject(this, command); 
    }); 
    } 
    if (typeof command == "string") { 
    // method or argument query 
    switch (command.toLowerCase()) { 
     case 'option': 
     //get value, return the first item's value 
     if (typeof val == undefined) return this.eq(0).data('myPlugin-options')[option]; 
     //set option value 
     return this.each(function() { 
      setOption(this, option, val); 
     }); 

     case 'update': 
     return this.each(function() { 
      updateObject(this); 
     }); 
     //other commands here. 
    } 
    } 
} 
})(jQuery) 

Con el ejemplo anterior, tiene una plantilla genérica para una extensión de jQuery, es una buena costumbre el tener la siguiente convención para su uso ..

Initialization: 
    $(...).myPlugin({ initialization-options-here }); 
Command: 
    $(...).myPlugin('command-name'); //where command can be update, etc. 
Get Option: 
    var myValue = $(...).myPlugin('option', 'option-name'); 
Set Option: 
    $(...).myPlugin('option', 'option-name', newValue); 

Se actualizó para usar .data de cada obj individual.

Answer 2

Sus opciones son para todo el plugin. Muévelos dentro de cada(). (¿Por qué hace esta pregunta? Deletrea la solución usted mismo.)

Answer 3

He estado teniendo el mismo problema, pero solo las funciones aprobadas se sobrescribieron. Las propiedades directas persistían.

De todos modos, para explicar mejor qué ~ reinierpost significaba, cambiar su código a esto debería funcionar. Tendrás que pasar 'opts' a todas partes, pero creo que es necesario sacar las opciones del espacio de nombre de todo el complemento.

$.fn.myPlugin = function(options) { 

    // iterate all matched elements 
    return this.each(function() { 
     // build main options before element iteration 
     var opts = $.extend({}, $.fn.myPlugin.defaults, options); 
     callPluginFunctions(this, opts); 
    }); 
}; 

Editar: Aquí está el código de mi plugin de

this.each(function() { 
    var thisConfig = config; 
    thisConfig = $.extend(thisConfig,settings); 
    $.attach($(this),thisConfig); 
}); 

... 

$.attach = function($target,config){ 

Así que no tengo en todo el plug-in "config" - justo dentro de cada función.