مسج البرنامج المساعد الكتلاية

Question

قد يكون هذا سؤال دنيوي للغاية، ولكن هذا هو أول مسافة مسج قمت به وأنا غامض بعض الشيء على فهم قواعد النطاق في جافا سكريبت.

أحاول كتابة مسج مسج بسيط يلتف حول api overflow المكدس. أنا بدأت من خلال محاولة العمل مع 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'});

المشكلة هي أنه عند إجراء المكالمة الثانية، فإنه بطريقة أو بأخرى باستخدام المجال الصحيح ومعلمات الهوية، ولكن حقل ParentID الذي يستخدمه في وظيفة رد الاتصال لإنشاء 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.

فجأة يبدأ العمل. لذلك تحتاج إلى التحقيق في كيفية كتابة مكون إضافي يدعم مثيلات متعددة في صفحة واحدة.

يمكنك اختيار أي مسافة مسج "جيدة" التي تدعم مثيلات متعددة للتحقق من كيفية القيام بذلك.

على سبيل المثال جيعرية كاروسيل.

تحقق من كيفية تفاعل الخطوط للسماح بإنشاء مثيلات كاروسل متعددة في صفحة واحدة (رمز مأخوذ من مصدر جيكيري كاروسيل)

$.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({
...
});