jQuery Plugin Écrasement Paramètres

Question

Cela peut être une question très banale, mais c'est le premier plugin jQuery que je l'ai écrit et je suis un peu floue sur la compréhension des règles de portée en JavaScript.

Je suis en train d'écrire un plugin jQuery simple qui enroule autour de l'API Stack Overflow. Je commence en essayant de travailler avec l'API Flair.

Je voulais faire le plugin comme configurable que possible afin que vous puissiez facilement passer le domaine et l'ID utilisateur et générer plusieurs 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'});

Le problème est, quand il fait le deuxième appel, il utilise en quelque sorte les paramètres de domaine et id correct, mais le champ parentId qu'il est à l'aide de la fonction de rappel pour créer le code HTML utilise le premier paramètre.

Vous pouvez voir le plugin ici et HTML

Answer 1

MISE À JOUR

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

utilisation:

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

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

Answer 2

Le problème est que vous avez une seule instance de votre plugin. Cela signifie que les deux appels à $.jStackOverflow.flair() interfèrent les uns avec les autres à la fois de manipuler des données INTERAL d'un seul objet.

Recherchez une démo ce qui se passe s'il y a un certain retard entre les deux appels (cliquez sur les deux boutons en bas)

http://jsbin.com/esovu (modifier http://jsbin.com/esovu/edit

Soudain, il commence à travailler. Vous avez donc besoin d'enquêter sur la façon d'écrire un plugin qui prend en charge plusieurs instances sur une seule page.

Vous pouvez choisir un plugin jQuery « bon » qui prennent en charge plusieurs instances pour vérifier comment le faire.

par exemple. jQuery Carousel .

Vérifiez comment les lignes interagissent pour permettre la création de plusieurs instances de carrousel sur une page (code de la source prise 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({
...
});