jQuery Plugin sovrascrittura dei parametri

Question

Questa può essere una domanda molto banale, ma questo è il primo plugin jQuery che ho scritto e io sono un po 'sfocata sulla comprensione delle regole di visibilità in JavaScript.

Sto cercando di scrivere un semplice plugin jQuery che avvolge l'API Stack Overflow. Sto partendo, cercando di lavorare con l'API Flair.

Volevo fare il plugin come configurabile possibile, in modo che si può facilmente passare il dominio e user id, e generare più Flairs.

    var superUser = $.jStackOverflow.flair({domain:"superuser.com", id: 30162, parentId:'#su-flair'});
    var stackOverflow = $.jStackOverflow.flair({domain:"stackoverflow.com", id: 55954, parentId:'#so-flair'});

Il problema è che quando si fa la seconda chiamata, è in qualche modo utilizzando i parametri dominio e ID corretto, ma il campo parentId che sta usando nella funzione di callback per creare il codice HTML sta usando il primo parametro.

Si può vedere la plug qui e la HTML qui

Answer 1

AGGIORNAMENTO

DEMO: http://jsbin.com/epeti3/5

/* 16/02/2012 02.04.38 */
(function($) {
    $.fn.jStackOverflow = function(options) {
        var opts = $.extend({},
        $.fn.jStackOverflow.defaults, options);
        return this.each(function() {
            $this = $(this);
            var opt = $.meta ? $.extend({},
            opts, $this.data()) : opts;
            var result;
            var id = this.id;
            var flair = $.fn.jStackOverflow.flair(opt, id);
            $this.html(flair);
        });
    };
    $.fn.jStackOverflow.setApis = function(options) {
        var apis = options.protocol + options.domain + options.gTLD + "/users/flair/" + options.id + "." + options.format;
        if (options.makeCallbacks) {
            apis += "?callback=?";
        }
        return apis;
    };
    $.fn.jStackOverflow.flair = function(options, id) {
        var api = $.fn.jStackOverflow.setApis(options);
        if (options.makeCallbacks) {
            result = $.getJSON(api,
            function(data) {
                $.fn.jStackOverflow.flairCallback(data, options, id);
            });
        }
        return result;
    };
    $.fn.jStackOverflow.flairCallback = function(data, options, id) {
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                $('<div class="' + key + '"></div>').html(key + ' : ' +data[key]).appendTo('#' + id);
            }
        }
    };
    $.fn.jStackOverflow.defaults = {
        protocol: 'http://',
        domain: 'stackoverflow',
        gTLD: '.com',
        format: 'json',
        makeCallbacks: true
    };
})(jQuery);

utilizzo:

<div id="so-flair"></div>

 $(function() {
      $('#so-flair').jStackOverflow({domain:"stackoverflow", id: 91130 });
    });

Answer 2

Il problema è che avete solo una singola istanza del plugin. Ciò significa che le due chiamate $.jStackOverflow.flair() interferiscano tra loro sia come manipolare i dati interal di un singolo oggetto.

Controlla una demo che cosa succede se c'è qualche ritardo tra le due chiamate (Fare clic due pulsanti nella parte inferiore)

http://jsbin.com/esovu (per modificare http://jsbin.com/esovu/edit

Improvvisamente si inizia a lavorare. Quindi è necessario indagare su come scrivere un plugin che supporta più istanze in una singola pagina.

È possibile scegliere qualsiasi "buona" plugin per jQuery che supportano più istanze per verificare come farlo.

es. jQuery Carousel .

Verificare come le linee interagiscono per consentire la creazione di più istanze del carosello su una sola pagina (codice preso dal sorgente di jQuery Carousel)

$.fn.jcarousel = function(o) { //this would match your `jStackOverflow`
    return this.each(function() { //for each matched element return a new carousel
        new $jc(this, o);
    });
};
...
var defaults = {
...
};
...
$.jcarousel = function(e, o) { //the acutal constructor
...
}
...
$jc.fn.extend({
...
});