सामग्री डिज़ाइन लाइट जेएस गतिशील रूप से लोड की गई HTML फ़ाइल

Question

पर लागू नहीं है, मैं अपनी वेबसाइट के लिए नेविगेशन लेआउट को एकजुट करना चाहता हूं, इसलिए मैंने नेविगेशन के लिए कोड रखने वाली एक अलग HTML फ़ाइल बनाई है। मैं एक जे एस का उपयोग गतिशील रूप से फ़ाइल को लोड करने:

$("#navigation").load("/navigation/navigation.html", function() { 
    $.getScript('/material.min.js'); 
}); 

समस्या यह है कि material.min.js इस एचटीएमएल अंदर गतिशील लोड घटकों के लिए मार डाला नहीं प्राप्त करता है और मैं कुछ महत्वपूर्ण कार्यक्षमता खो देते हैं। मुझसे इसका समाधान किस प्रकार होगा?

Answer 1

आधिकारिक docs से:

सामग्री डिज़ाइन लाइट स्वचालित रूप से रजिस्टर और पृष्ठ लोड पर एमडीएल वर्गों के साथ चिह्नित सभी तत्वों को प्रस्तुत करना होगा। हालांकि, जहां आप डीओएम तत्वों को गतिशील रूप से बना रहे हैं, आपको upgradeElement फ़ंक्शन का उपयोग करके नए तत्वों को पंजीकृत करने की आवश्यकता है।

तो सामग्री.जेएस स्क्रिप्ट को फिर से लोड करना इसे निष्पादित नहीं करेगा। लेकिन आप पूरे प्रयोग किए गए मार्कअप या विशेष तत्वों को लागू करके upgradeElements के साथ कुछ प्रयोग कर सकते हैं।

Answer 2

जांचें कि componentHandler लोड हो गया है, और लोड के बाद तत्वों को अपग्रेड करने का प्रयास करें।

if(!(typeof(componentHandler) == 'undefined')){ 
    componentHandler.upgradeAllRegistered(); 
} 

How the Component Handler works

इस संक्षेप में सभी पंजीकृत घटकों के ऊपर चला जाता है। प्रदान की गई सीएसएस कक्षा के साथ सभी नोड्स के लिए क्वेरीज़। उन पर लूप्स और उन्हें एक-एक करके तत्काल करता है। जब नोड पर अपग्रेड किया जाता है, तो नवीनीकृत ऑब्जेक्ट डेटासेट में जोड़ा जाता है। इस ऑब्जेक्ट में घटक classAsString गुणों की एक अल्पविराम से अलग सूची शामिल है, यह पहचानने के लिए कि कौन से उन्नयन किए गए हैं।