JQuery: Insertion de grandes quantités de HTML via la manipulation DOM - maintenabilité?

Question

J'ai trouvé de bons articles sur les bonnes pratiques d'insertion d'éléments dom à l'aide de jquery comme ceci , ceci et ceci

C'est correct quand vous avez juste besoin d'insérer quelques éléments, mais il me semble que ces options sont très mauvaises du point de vue de la maintenabilité (le code est répété deux fois, donc si un changement est nécessaire, il doit se produire deux foisalors il devient très sujet aux erreurs),

Voici (juste une petite partie) ce que j'ai

<script type="text/javascript">
var phnFragment = "<tr><td align=\"right\">Telephone:</td><td colspan=\"2\"><select name=\"select\" size=\"1\"style=\"width: 100px;\"><option>-- Choose --</option><option>Home</option><option>Mobile</option><option>Work</option></select><input type=\"text\" size=\"20px\" /></td></tr>";
    $(document).ready(function() {
    $('#addmorephones').click(function() {
                $("#phones").append(phnFragment);
            });
    });
</script>
....
....
<tr id="phones">
        <td align="right">Telephone:</td>
        <td colspan="2"><select name="select" size="1"
            style="width: 100px;">
            <option>-- Choose --</option>
            <option>Home</option>
            <option>Mobile</option>
            <option>Work</option>
        </select><input type="text" size="20px" /> <a href="javascript:void(0);" id="addmorephones">[+]</a>
        </td>
    </tr>

Y a-t-il une meilleure façon d'accomplir cela?Existe-t-il un moyen de dire à jquery de copier une partie de l'arbre dom et de l'utiliser comme fragment à insérer?

J'adorerais apprendre des alternatives

Answer 1

Y a-t-il un moyen de dire à jquery de copier une partie de l'arbre dom et de l'utiliser comme fragment à insérer?

Oui: clone . (Vous n'avez même pas vraiment besoin de jQuery pour cela; cloneNode fait partie de l'API DOM.) Si vous avez des valeurs id dans ce que vous clonez, vous devrez parcourir le résultat en les changeant, bien sûr, car ids être unique. Mais c'est parfait pour des choses comme les lignes de tableau et autres.

Lors du chargement de la page, vous pouvez récupérer l'un des vrais, le cloner (sans le joindre au document), le nettoyer de tout ce dont vous n'avez pas besoin, puis continuer à cloner ce modèle. Aide à garder votre JavaScript quelque peu découplé de votre balisage.

<₹Example:

HTML:

<table>
  <tbody>
    <tr><td>I'm a row in the table</td></tr>
  </tbody>
</table>

JavaScript:

jQuery(function($) {
  var counter = 10,
      rowModel;

  // Get the row model, clone it, remove the
  // content we'll replace anyway.
  rowModel = $("tr:first").clone();
  rowModel.find("td:first").empty();

  // Do our first tick
  tick();

  // Use the model to append to the table
  function tick() {
    var clone = rowModel.clone();

    clone.find("td:first").html("Added at " + new Date());
    $("tbody:first").append(clone);

    // Again?
    if (--counter > 0) {
      setTimeout(tick, 500);
    }
  }

});

Live copy

Évidemment, c'est rapide et sale, mais vous voyez l'idée. Si vous utilisez des attributs data-xyz (autorisés en HTML5), names, classes, etc., vous pouvez éviter de lier votre code trop étroitement à votre structure.

Answer 2

Dans ce cas, vous pouvez récupérer le contenu de #phones lors de l'événement ready:

$(document).ready(function() {
    var phnFragment = $("#phones").html();

    $('#addmorephones').click(function() {
        $("#phones").append(phnFragment);
    });
});

Si vous avez besoin de copier des informations plus complexes (comme des événements), vous pouvez utiliser la méthode .clone () :

$(document).ready(function() {
    var $phnFragment = $("#phones").children().clone();

    $('#addmorephones').click(function() {
        $("#phones").append($phnFragment.clone());
    });
});

Answer 3

T.J.a une excellente réponse si vous avez un balisage existant que vous souhaitez réutiliser.Vous pouvez également utiliser le type de script text / html pour mettre votre contenu dans le balisage en tant que modèle, comme illustré ici:

http://ejohn.org/blog/javascript-micro-templating/