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

Question

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

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

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

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

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

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

Answer 1

ОБНОВЛЕНО

ДЕМО: http://jsbin.com/epeti3/5

/* 16/02/2012 02.04.38 */
(function($) {
    $.fn.jStackru = function(options) {
        var opts = $.extend({},
        $.fn.jStackru.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.jStackru.flair(opt, id);
            $this.html(flair);
        });
    };
    $.fn.jStackru.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.jStackru.flair = function(options, id) {
        var api = $.fn.jStackru.setApis(options);
        if (options.makeCallbacks) {
            result = $.getJSON(api,
            function(data) {
                $.fn.jStackru.flairCallback(data, options, id);
            });
        }
        return result;
    };
    $.fn.jStackru.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.jStackru.defaults = {
        protocol: 'http://',
        domain: 'stackru',
        gTLD: '.com',
        format: 'json',
        makeCallbacks: true
    };
})(jQuery);

использовать:

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

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

Answer 2

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

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

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

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

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

например, jQuery Carousel.

Проверьте, как взаимодействуют линии, чтобы разрешить создание нескольких экземпляров карусели на одной странице (код взят из источника jQuery Carousel)

$.fn.jcarousel = function(o) { //this would match your `jStackru`
    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({
...
});