如何更新/刷新我動態添加到頁面中的Google MDL元素？

Question

我正在使用Google Material Design組件，這些組件是爲簡單起見而被剝離的，然後在頁面加載時呈現更完整。下面簡單地表示這個問題：

什麼顯示index.html文件：

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

當頁面加載什麼呈現到DOM：

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

我正在創建一個拖放HTML編輯器併爲每個組件類型創建模板文件。對於交換機的模板文件很簡單：

switch.html

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

問題是，當我拖到這個畫布。 jQuery查看switch.html並將DOM呈現<div class="switch"></div>，但由於它是動態添加的，因此不會被添加額外軌道和拇指標籤的腳本「看到」。

我該如何解決這個問題，以便在DOM更新時重新運行任何腳本？理想情況下，我想避免觸摸任何Material Design腳本文件。

Answer 1

我發現從MDL貢獻者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(); 
    }); 
}); 

對於未來的讀者和材料設計精簡版（MDL）框架的用戶，您還可以刷新動態添加元素單獨（而不是梳理整個DOM）。

例如，componentHandler.upgradeDom("mdl-menu")將升級只有mdl-menu元素。

Further reading here.