Перезапись параметров плагина jQuery

Question

Это может быть очень приземленный вопрос, но это первый плагин jQuery, который я написал, и я немного не совсем понимаю правила области видимости в JavaScript.

Я пытаюсь написать простой плагин jQuery, который работает с API переполнения стека.Я начинаю с того, что пытаюсь работать с API Flair.

Я хотел сделать плагин как можно более настраиваемым, чтобы вы могли легко передать ему домен и идентификатор пользователя и сгенерировать несколько вариантов.

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

Проблема в том, что когда он выполняет второй вызов, он каким-то образом использует правильные параметры domain и id, но поле ParentID, которое он использует в функции обратного вызова для создания HTML, использует первый параметр.

Вы можете видеть плагин здесь и тот HTML здесь

Answer 1

ОБНОВЛЕННЫЙ

ДЕМОНСТРАЦИЯ: 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);

использование:

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

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

Answer 2

Проблема в том, что у вас есть только один экземпляр вашего плагина.Это означает, что два вызова $.jStackOverflow.flair() мешают друг другу, поскольку оба манипулируют внутренними данными одного объекта.

Проверьте в демо-версии, что произойдет, если между двумя вызовами возникнет некоторая задержка (нажмите две кнопки внизу).

http://jsbin.com/esovu (для редактирования http://jsbin.com/esovu/edit

Внезапно это начинает работать.Итак, вам нужно изучить, как написать плагин, который поддерживает несколько экземпляров на одной странице.

Вы можете выбрать любой "хороший" плагин jQuery, который поддерживают несколько экземпляров, чтобы проверить, как это сделать.

например , Карусель jQuery.

Проверьте, как взаимодействуют строки, чтобы разрешить создание нескольких экземпляров Carousel на одной странице (код взят из исходного кода 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({
...
});