¿Cómo puedo actualizar / actualizar los elementos MDL de Google que agrego dinámicamente a mi página?

Estoy trabajando con los componentes de Google Material Design que se desmontan para simplificar y luego se procesan de forma más completa cuando se carga la página. Simplificado a continuación para ilustrar el problema:

Lo que se muestra en el archivo index.html :

Lo que se representa en el DOM cuando se carga la página :

 

Estoy creando un editor de arrastrar y soltar HTML y tengo archivos de plantilla para cada tipo de componente. El archivo de plantilla para un cambio es simplemente:

switch.html

El problema es cuando lo arrastro al canvas. jQuery busca en switch.html y representa

en el DOM, pero como se agregó dinámicamente, no se “ve” por los scripts que agregaron las tags adicionales de pista y pulgar.

¿Cómo puedo solucionar este problema para que cada vez que se actualice el DOM, vuelva a ejecutar los scripts? Idealmente, me gustaría evitar tocar cualquiera de los archivos de script de Material Design.

Encontré la solución en esta publicación del foro de MDL Github del colaborador de MDL Jonathan Garbee :

El controlador de componente [ componentHandler.upgradeDom () ] se encargará de actualizar todo si solo lo llama sin parámetros.

Entonces, el pseudocódigo de mi solución sería:

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

Para futuros lectores y usuarios del marco Material Design Lite (MDL), también puede actualizar elementos agregados dinámicamente de forma individual (en lugar de combinar todo el DOM).

Por ejemplo, componentHandler.upgradeDom("mdl-menu") actualizará solo mdl-menu elementos del mdl-menu .

Lectura adicional aquí.