Séparer Javascript et Html, lors de l'ajout dynamique de html via javascript

Question

Je suis en train de construire une table très dynamique pour une application de liste, qui effectuera essentiellement des fonctions de base de CRUD via AJAX. Ce que je voudrais faire est de séparer la conception visuelle et javascript au point où je peux changer le côté de la conception sans toucher le côté JS. Cela ne fonctionnerait que si la conception reste à peu près la même (je voudrais l'utiliser pour un prototypage rapide)

Voici un exemple.

<table> 
<tr><td>record-123</td><td>I am line 123</td><td>delete row</td></tr> 
<tr><td>record-124</td><td>I am line 124</td><td>delete row</td></tr> 
<tr><td>record-125</td><td>I am line 125</td><td>delete row</td></tr> 
<tr><td>add new record</td></tr> 
</table> 

Maintenant, quand j'ajouter un nouvel enregistrement, je voudrais insérer une nouvelle ligne de html, mais je préfère ne pas mettre ce code HTML dans le fichier javascript.

Ce que je considère est de créer une ligne comme celle-ci sur la page, près de la table.

<tr style='visble:none;' id='template-row'><td>record-id</td><td>content-area</td><td>delete row</td></tr> 

Et quand je viens d'ajouter la nouvelle ligne, je recherche la page pour les balises à l'aide id = modèle-ligne, puis l'attraper, faire une chaîne remplacer dessus, puis le mettre dans la bon endroit dans la page.

Tant que le design ne change pas radicalement, et que je garde les chaînes de caractères génériques identiques, cela signifie que les dessins peuvent être rapidement modifiés sans toucher les js.

Peut-on donner des conseils sur une méthodologie comme celle-ci?

Answer 1

Jetez un oeil à John Resig's Micro-Templating.

Utilisation:

<script type="text/html" id="row_tmpl"> 
    <tr><td><%=id%></td><td><%=content%></td><td>delete row</td></tr> 
</script> 

<script type="text/javascript" src="templating.js"></script> 
<script type="text/javascript"> 
    (function(){ 
     var dataObject = {"id":"myid","content":"some content"}; 
     var html = tmpl("row_tmpl", dataObject); 
     // do whatever you want with the new HTML... 
    }()); 
</script> 

---

NOTES
Comme il y a des utilisateurs SO qui sont à juste titre concernent des attaques XSS utilisant cette approche, je veux juste souligner que la fonction micro-templating offre façons de contourner le problème. Tout javascript dans les balises <% %> sera exécuté. Donc, si vous avez une fonction qui nettoie l'entrée de contenu malveillant, vous pouvez l'appeler dans ces balises <% %>.

Answer 2

saisissez-le, remplacez-le par une chaîne, puis placez-le au bon endroit dans la page.

Chaîne de remplacement? Si c'est dans la page, vous avez déjà un noeud DOM. Il n'y a pas besoin de faire le tour de votre noeud en une chaîne HTML, en le piratant et en le ré-analysant dans un noeud DOM. De cette façon, il ya de la folie et des failles de sécurité sur les sites inter-sites lorsque vous oubliez d'échapper votre texte pour le HTML.

Utilisez à la place cloneNode pour obtenir une copie des objets DOM, modifiez les bits dont vous avez besoin et ajoutez-les dans le document.

<style type="text/css"> 
    .hidden { display: none; } 
</style> 

<table id="sometable"> 
    <tr class="hidden"><td>-</td><td>-</td><td>delete row</td></tr> 
</table> 
<input type="button" id="sometable-newrow" value="New row"/> 

<script type="text/javascript"> 
    var recordn= 1; 

    document.getElementById('sometable-newrow').onclick= function() { 
     var table= document.getElementById('sometable'); 
     var tr= table.rows[0].cloneNode(true); 

     tr.className= ''; // remove hiddenness 
     tr.cells[0].firstChild.data= 'record-'+recordn; 
     tr.cells[1].firstChild.data= 'I am line '+recordn; 
     tr.cells[2].onclick= removeRow; 

     table.rows[table.rows.length-1].parentNode.appendChild(tr); 
     recordn++; 
    }; 

    function removeRow() { 
     var tr= this.parentNode; 
     tr.parentNode.removeChild(tr); 
    } 
</script>