AJAX लोड के बाद jQuery-style UI इंटरफ़ेस को फिर से बाध्य करने के लिए पसंदीदा पैटर्न क्या है?

Question

यह हमेशा मुझे मिलता है। किसी वेब पेज पर सभी प्यारे यूआई तत्वों को शुरू करने के बाद, मैं कुछ सामग्री लोड करता हूं (या तो एक मॉडल या टैब में उदाहरण के लिए) और नई लोड की गई सामग्री में UI तत्व प्रारंभ नहीं होते हैं। उदाहरण के लिए:,

var uiRegistry = { 
    registry: [], 
    push: function (func) { this.registry.push(func) }, 
    apply: function (scope) { 
    $.each(uiRegistry.registry, function (i, func) { 
     func(scope); 
    }); 
    } 
}; 

uiRegistry.push(function (scope) { 
    $('a.button', scope).button(); 
    $('select', scope).chosen(); 
}); 

uiRegistry.apply('body'); // content gets styled as per usual 

$('#content').load('/uri', function() { 
    uiRegistry.apply($(this)); // content gets styled :) 
}); 

मैं इस समस्या के साथ केवल एक ही व्यक्ति नहीं हो सकता इसलिए किसी भी बेहतर पैटर्न देखते हैं:

$('a.button').button(); // jquery ui button as an example 
$('select').chosen(); // chosen ui as another example 
$('#content').load('/uri'); // content is not styled :(

मेरे वर्तमान दृष्टिकोण तत्वों की एक रजिस्ट्री कि बंधन की जरूरत बनाने के लिए है ऐसा करने के लिए?

Answer 1

सबसे अच्छा तरीका -even बेहतर एक अलग फाइल एक समारोह में सभी ui कोड रैप करने के लिए किया जाएगा - बस यहाँ वापस एक फोन के रूप में है कि समारोह निर्दिष्ट .. और ajax लोड पर एक छोटा सा उदाहरण है

लेट्स मान लीजिए कि आप कोड है कि एक दिनांक पिकर के लिए कक्षा someclass-for-date साथ पाठ फ़ील्ड बाँध फिर अपने कोड इस प्रकार दिखाई देगा है ..

$('.someclass-for-date').datepicker(); 

यहाँ मैं क्या लगता है कि सबसे अच्छा है

function datepickerUi(){ 
    $('.someclass-for-date').datepicker(); 
} 

0 है

और यहाँ क्या भार की तरह

$('#content').load('/uri', function(){ 

    datepickerUi(); 

}) 

दिखना चाहिए या आप स्क्रिप्ट टैग में अपने html के अंत में यह लोड कर सकते हैं .. (लेकिन मैं उस तरह नहीं है, cuz यह डिबग करने के लिए कठिन है) है

यहाँ

कुछ सुझाव

अपने कोड और सीएसएस शैलियों संभव के रूप में साफ रखने .. जिसका अर्थ है कि पाठ फ़ील्ड कि तिथि पिकर होना चाहिए के लिए उन्हें इस दर अपने कोड के सभी सब पर अपनी वेबसाइट पर एक वर्ग .. देना है स्वच्छ और बनाए रखने में आसान होगा ..

ओओसीएसएस पर और पढ़ें यह मेरा अर्थ स्पष्ट करेगा।

ज्यादातर jQuery के साथ यह सब संगठन के बारे में है ... यह कुछ विचार और आप क्या आप कोड की एक पंक्ति के साथ किया चाहते होगा ..

संपादित

यहाँ

कुछ इसी तरह के साथ एक js बेला है आपके लिए, लेकिन मुझे लगता है कि यह थोड़ा क्लीनर click here

Answer 2

मेरा उत्तर मूल रूप से आपके जैसा रूपरेखा जैसा ही है, लेकिन मैं सेटअप कोड को ट्रिगर करने के लिए jquery ईवेंट का उपयोग करता हूं। मैं इसे "मोडोम" घटना कहता हूं।

जब मैं नई सामग्री लोड, मैं माता-पिता पर अपने घटना ट्रिगर: विजेट में

parent.append(newcode).trigger('moddom'); 

, मैं उस घटना के लिए देखो:

$.on('moddom', function(ev) { 
    $(ev.target).find('.myselector') 
}) 

इस घटना को वर्णन करने के लिए oversimplified है तरीका।

असल में, मैं इसे एक फ़ंक्शन domInit में लपेटता हूं, जो एक चयनकर्ता और कॉलबैक तर्क लेता है।जब भी चयनकर्ता से मेल खाता है तो यह कॉलबैक कॉल करता है - पहली तर्क के रूप में एक jQuery तत्व के साथ।

तो मेरी विजेट कोड में, मैं यह कर सकता:

domInit('.myselector', function(myelement) { 
    myelement.css('color', 'blue'); 
}) 

domInit सवाल "domInit" जो कार्यों कि पहले से ही लागू किया गया है की एक रजिस्ट्री है में तत्व पर डेटा सेट।

मेरा पूरा domInit समारोह:

window.domInit = function(select, once, callback) { 
    var apply, done; 
    done = false; 
    apply = function() { 
    var applied, el; 
    el = $(this); 
    if (once && !done) { 
     done = true; 
    } 
    applied = el.data('domInit') || {}; 
    if (applied[callback]) { 
     return; 
    } 
    applied[callback] = true; 
    el.data('domInit', applied); 
    callback(el); 
    }; 
    $(select).each(apply); 
    $(document).on('moddom', function(ev) { 
    if (done) { 
     return; 
    } 
    $(ev.target).find(select).each(apply); 
    }); 
}; 

अब हम सिर्फ जब भी हम डोम परिवर्तन करने 'moddom' घटना को गति प्रदान करने के लिए याद करने के लिए है।

यदि आपको "एक बार" कार्यक्षमता की आवश्यकता नहीं है, तो आप इसे सरल बना सकते हैं, जो एक बहुत दुर्लभ एज केस है। यह केवल एक बार कॉलबैक कॉल करता है। उदाहरण के लिए यदि आप किसी भी तत्व को मिलान करते समय वैश्विक कुछ करने जा रहे हैं - लेकिन इसे केवल एक बार होने की आवश्यकता है। किया पैरामीटर के बिना सरलीकृत:

window.domInit = function(select, callback) { 
    var apply; 
    apply = function() { 
    var applied, el; 
    el = $(this); 
    applied = el.data('domInit') || {}; 
    if (applied[callback]) { 
     return; 
    } 
    applied[callback] = true; 
    el.data('domInit', applied); 
    callback(el); 
    }; 
    $(select).each(apply); 
    $(document).on('moddom', function(ev) { 
    $(ev.target).find(select).each(apply); 
    }); 
}; 

मुझे ऐसा लगता है ब्राउज़रों एक कॉलबैक जब डोम परिवर्तन है, लेकिन मैं कभी नहीं ऐसी बात के बारे में सुना है प्राप्त करने के लिए एक तरह से होना चाहिए।