web-dev-qa-db-fra.com

Comment puis-je mettre à jour / actualiser dynamiquement les éléments Google MDL que j'ajoute à ma page?

Je travaille avec des composants Google Material Design qui sont simplifiés, puis rendus plus complètement lorsque la page est chargée. Simplifié ci-dessous pour illustrer le problème:

ce qui apparaît dans le fichier index.html:

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

ce qui est rendu au DOM lorsque la page est chargée:

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

Je crée un éditeur HTML glisser-déposer et j'ai des fichiers modèles pour chaque type de composant. Le fichier modèle pour un commutateur est simplement:

switch.html

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

Le problème, c'est quand je le fais glisser sur le canevas. jQuery regarde switch.html et rend <div class="switch"></div> au DOM, mais comme il a été ajouté dynamiquement, il n'est pas "vu" par les scripts qui ont ajouté les balises de piste et de pouce supplémentaires.

Comment puis-je résoudre ce problème afin que chaque fois que le DOM est mis à jour, il réexécute tous les scripts? Idéalement, je voudrais éviter de toucher aux fichiers de script Material Design.

jqueryhtmldynamic
19
Jon

J'ai trouvé la solution dans cet article du forum MDL Github du contributeur MDL Jonathan Garbee :

Le gestionnaire de composants [ componentHandler.upgradeDom () ] se chargera de tout mettre à niveau si vous l'appelez simplement sans paramètres.

Le pseudo-code de ma solution serait donc:

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

Pour les futurs lecteurs et utilisateurs du framework Material Design Lite (MDL), vous pouvez également actualiser les éléments ajoutés dynamiquement individuellement (au lieu de peigner l'intégralité du DOM).

Par exemple, componentHandler.upgradeDom("mdl-menu") mettra à jour les éléments seulementmdl-menu.

Plus de lecture ici.

34
Jon

Vous pouvez utiliser la componentHandler.upgradeDom(); pour mettre à niveau dynamiquement l'élément ou utiliser les lignes suivantes pour rétrograder l'élément existant et le mettre à niveau à nouveau

Type 1:

   $(".data").find(".is-upgraded").each(function(){                 
       $(this).removeAttr("data-upgraded").find(".mdl-switch__ripple-container,.mdl-switch__track").remove();  //downgrade the existing upgraded elements
   });
    componentHandler.upgradeDom(); // upgrade the elements

Type 2:

 $(".data").html("{{content}}").promise().done(function(){                 
           componentHandler.upgradeDom(); // upgrade the newest elements 
 });
0
karthikeyan ganesan