Come posso aggiornare/aggiornare gli elementi di Google MDL che aggiungo alla mia pagina in modo dinamico?

Question

Sto lavorando con i componenti di Google Material Design che sono semplificati per semplicità, quindi resi più completamente quando la pagina viene caricata. Semplificata di seguito per illustrare il problema:

Cosa indica nel file index.html:

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

Cosa rende al DOM quando la pagina viene caricata:

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

Sto creando un editor HTML drag and drop e ho file template per ogni tipo di componente. Il file di modello per un interruttore è semplicemente:

switch.html

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

Il problema è quando ho trascinare questo alla tela. jQuery guarda switch.html e rende <div class="switch"></div> al DOM, ma poiché è stato aggiunto dinamicamente, non viene "visto" dagli script che aggiungono la traccia aggiuntiva e i thumb tag.

Come posso risolvere questo problema in modo che ogni volta che il DOM viene aggiornato, riesegue tutti gli script? Idealmente, vorrei evitare di toccare i file di script di Material Design.

Answer 1

Ho trovato la soluzione in this MDL Github forum post da MDL collaboratore Jonathan Garbee:

Il gestore di componente [componentHandler.upgradeDom()] si occuperà di aggiornare tutto ciò solo se si chiama senza parametri.

Così la pseudo-codice della mia soluzione sarebbe:

// 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(); 
    }); 
}); 

per i lettori e gli utenti del quadro Material Design Lite (MDL) futuri, è anche possibile aggiornare elementi aggiunti dinamicamente singolarmente (invece di pettinando l'intero DOM).

Ad esempio, componentHandler.upgradeDom("mdl-menu") aggiornerà solomdl-menu elementi.

Further reading here.