Параметры перезаписи плагина jQuery

Question

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

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

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

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

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