मैं Google एमडीएल तत्वों को कैसे अपडेट/रीफ्रेश कर सकता हूं जो मैं अपने पृष्ठ में गतिशील रूप से जोड़ता हूं?

Question

मैं Google सामग्री डिज़ाइन घटकों के साथ काम कर रहा हूं जो सादगी के लिए छीन दिए गए हैं, फिर पेज लोड होने पर और अधिक पूर्ण रूप से प्रस्तुत किया जाता है।

क्या index.html फ़ाइल में पता चलता है:: इस मुद्दे को वर्णन करने के लिए नीचे दिए गए सरलीकृत

<div class="switch"></div>

डोम के लिए क्या renders जब पेज भरी हुई है:

<div class="switch"> 
    <div class="switch_track"></div> 
    <div class="switch_thumb"></div> 
</div> 

मैं एक ड्रैग बना रहा हूं और HTML संपादक ड्रॉप कर रहा हूं और प्रत्येक घटक प्रकार के लिए टेम्पलेट फाइलें बना रहा हूं। समस्या यह है जब मैं कैनवास को यह खींचें

switch.html

<div class="switch"></div>

: एक स्विच के लिए टेम्पलेट फ़ाइल बस है। jQuery switch.html पर दिखता है और <div class="switch"></div> को डोम में प्रस्तुत करता है, लेकिन चूंकि इसे गतिशील रूप से जोड़ा गया था, इसलिए उन स्क्रिप्ट द्वारा "देखा" नहीं जा रहा है, जिसमें अतिरिक्त ट्रैक और अंगूठे टैग जोड़े गए हैं।

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

Answer 1

मैं एमडीएल योगदानकर्ता Jonathan Garbee से this MDL Github forum post में समाधान नहीं मिला:

घटक हैंडलर [componentHandler.upgradeDom()] अगर आप सिर्फ कोई पैरामीटर से कॉल करने के लिए सब कुछ उन्नयन संभाल लेंगे।

तो मेरी समाधान के छद्म कोड होगा:

// Callback function of jquery-ui droppable element 
drop: function(event, ui) { 
    // Add the element from it's template file 
    $.get("templates/" + elem + ".html", function(data) { 
     $("#canvas").append(data); 

     // Expand all new MDL elements 
     componentHandler.upgradeDom(); 
    }); 
}); 

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

उदाहरण के लिए, componentHandler.upgradeDom("mdl-menu")केवलmdl-menu तत्वों को अपग्रेड करेगा।

Further reading here.