Existe-t-il un meilleur moyen de peupler les widgets HTML que de créer des chaînes et de définir innerHTML?

Question

Avec XML XSLT, il est possible de construire un joli template en HTML, de le convertir en XSLT et d'utiliser des données xml provenant du serveur pour remplir dynamiquement des widgets côté client. JSON et JSONP sont parfaits pour interagir avec le serveur et manipuler les données dans JS. Quand il s'agit de rendre les données JSON, la plupart des exemples que j'ai vus utilisent JS pour concaténer une chaîne moche et définir le innerHTML de certains éléments pour le rendre. Y a-t-il une manière facile de créer des widgets html compatible avec les navigateurs et de les remplir avec JSON qui n'implique pas la frappe de chaînes ou la construction de charges d'éléments DOM?

Answer 1

Comme mentionné dans d'autres réponses, ce que vous cherchez est un langage basé sur javascript. Il y a une assez bonne liste allant dans ce related question. Juste pour mettre en évidence un couple, mustache est propre, simple et porté à de nombreuses langues. Je crois qu'il est utilisé par Twitter. Google Closure a template language qui fonctionne à la fois JavaScript et Java. Cela a été testé par Google.

D'autres bibliothèques JS majeures ont chacune un modèle en tant que plugins ou partie de la bibliothèque. Je sais que jQuery a au moins un plugin et en planifie un sur la feuille de route pour la version 1.5. Dojo a un clone of Django's templating language qui a l'air plutôt sympa.

Il y en a d'autres, mais je pense que ça va être la crème de la crème. Je n'utilise aucun de ceux-ci, parce que j'utilise un d'origine, mais je peux vous dire qu'ils sont très agréables à travailler et je les recommande fortement sur la concaténation de chaînes ou de faire plus de travail sur le serveur .

Answer 2

Vous pouvez utiliser jQuery et une sorte de plugin jQuery pour les modèles. Par exemple http://ivorycity.com/blog/jquery-template-plugin/ (jetez un oeil à cette page, il y a quelques échantillons de Nice)

Answer 3

Vous devriez voir ce billet de blog par John Resiq: JavaScript Micro-Templating

Il a un simple code micro-templating vous pouvez réutiliser. Il va comme ceci:

// Simple JavaScript Templating 
// John Resig - http://ejohn.org/ - MIT Licensed 
(function(){ 
    var cache = {}; 

    this.tmpl = function tmpl(str, data){ 
    // Figure out if we're getting a template, or if we need to 
    // load the template - and be sure to cache the result. 
    var fn = !/\W/.test(str) ? 
     cache[str] = cache[str] || 
     tmpl(document.getElementById(str).innerHTML) : 

     // Generate a reusable function that will serve as a template 
     // generator (and which will be cached). 
     new Function("obj", 
     "var p=[],print=function(){p.push.apply(p,arguments);};" + 

     // Introduce the data as local variables using with(){} 
     "with(obj){p.push('" + 

     // Convert the template into pure JavaScript 
     str 
      .replace(/[\r\t\n]/g, " ") 
      .split("<%").join("\t") 
      .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
      .replace(/\t=(.*?)%>/g, "',$1,'") 
      .split("\t").join("');") 
      .split("%>").join("p.push('") 
      .split("\r").join("\\'") 
     + "');}return p.join('');"); 

    // Provide some basic currying to the user 
    return data ? fn(data) : fn; 
    }; 
})(); 

Vous modèle serait dans le balisage:

<script type="text/html" id="item_tmpl"> 
    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> 
    <div class="grid_1 alpha right"> 
     <img class="righted" src="<%=profile_image_url%>"/> 
    </div> 
    <div class="grid_6 omega contents"> 
     <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p> 
    </div> 
    </div> 
</script> 

Pour l'utiliser:

var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject); 

Pour être clair - l'exemple ci-dessus a été prise de la blog et est pas mon code. Suivez le lien pour plus d'informations.