Параметры переопределения плагина jQuery

Question

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

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

Я хотел сделать плагин максимально настраиваемым, чтобы вы могли легко передать ему идентификатор домена и пользователя и создать несколько 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'}); 

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

Вы можете увидеть plugin here и HTML here

Answer 1

ОБНОВЛЕНО

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 + "https://stackoverflow.com/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.

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