jQuery Plugin Überschreibungsparameter

Question

Dies kann eine sehr banale Frage, aber dies ist die erste jQuery-Plugin, das ich geschrieben habe, und ich bin ein bisschen unscharf auf dem Verständnis die Bereichsregeln in JavaScript.

Ich versuche, eine einfache jQuery-Plugin, das umschlingt den Stack-Überlauf-API zu schreiben. Ich fange an, indem Sie versuchen, um die Arbeit mit dem Flair API aus.

Ich wollte das Plugin so konfigurierbar wie möglich machen, so dass Sie leicht die Domäne und Benutzer-ID übergeben können, und mehrere Flairs erzeugen.

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

Das Problem ist, wenn es um den zweiten Anruf macht, es ist irgendwie die richtige Domäne und id-Parameter verwenden, aber das parentId Feld, dass es in der Callback-Funktion ist mit dem HTML zu erstellen, um den ersten Parameter verwendet wird.

Sie sehen die Plugin hier und die HTML hier

Answer 1

AKTUALISIERT

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);

Verwendung:

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

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

Answer 2

Das Problem ist, dass Sie nur eine einzige Instanz des Plugins haben. Dies bedeutet, dass die beiden Anrufe zu $.jStackOverflow.flair() miteinander, da beide stören manipulieren interal Daten eines einzelnen Objekts.

für eine Demo überprüfen, was passiert, wenn es eine gewisse Verzögerung zwischen den beiden Anrufen ist (klicken Sie auf die beiden Tasten an der Unterseite)

http://jsbin.com/esovu (zu bearbeiten http://jsbin.com/esovu/edit

Plötzlich beginnt es Arbeiten. Sie müssen also untersuchen, wie ein Plugin zu schreiben, die mehrere Instanzen auf einer einzigen Seite unterstützt.

Sie können eine beliebige „gut“ jQuery-Plugin auswählen, die mehr Instanzen unterstützen zu überprüfen, wie es zu tun.

z. jQuery Carousel .

Überprüfen Sie, wie die Linien in Wechselwirkung treten auf einer Seite mehrere Karussell-Instanzen ermöglichen Erstellung (Code genommen von jQuery Carousel Quelle)

$.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({
...
});