2012-12-29 2 views
1

J'ai une question plutôt compliquée :)Bibliothèque/framework JavaScript pour générer du XHTML à partir de paramètres?

Je veux envoyer des données sous la forme de json du serveur au client.

Les données doivent être utilisées par javascript pour générer du XHTML à partir de ces données.

Maintenant, je cherche une bibliothèque/cadre qui m'aide à générer ce XHTML à partir de JSON. Par exemple, une solution pourrait être d'avoir des fichiers "template" XHTML spéciaux contenant des variables mappées par nom à une méthode javascript et cette méthode prend le tableau JSON et remplit certaines parties du XHTML avec les variables du JSON tableau.

Exemple de fichier modèle (pseudo-code):

nom:

generateXHTMLfromTemplate(templatename, data); 

et: TemplateA.something

<html> 
Hello my name is %VARIABLE1% ! 
</html> 

Et les cadres me génère ensuite une méthode comme celle (pseudo-code) retournerait XHTML.

Par exemple, je voudrais donc appeler comme ça (pseudocode):

container.html(generateXHTMLfromTemplate('TemplateA', '{"VARIABLE1" : "Earl"}')); 

Quelque chose comme ça serait génial, le meilleur serait le code d'achèvement de ces fichiers « modèle » dans Eclipse;)

+2

Quelque chose comme ça? https://github.com/janl/mustache.js/ – Blender

+1

D'autres à choisir: [doT] (http://olado.github.com/doT/), [Handlebars] (http://handlebarsjs.com/), [Underscore] (http: // underscorejs. org/# template). – Pointy

+0

Wow merci pour les réponses, en fait je travaille avec eclipse et jee (jsf) est-ce que ces bibliothèques ont une intégration avec le monde jee et/ou eclipse? –

Répondre

1

Malgré le fait que je serai probablement downvoted à l'oubli, je vais mettre une alternative très simple.

Si vous avez besoin d'une fonctionnalité très simple, vous pouvez utiliser un plugin très simple comme $.fn.loadtemplate, qui est une modification d'un de mes précédents $.fn.simpletemplate.

$.fn.loadtemplate = function(resource, variables) { 
    return this.each(function() { 
     var $self = $(this); 
     $.ajax({ 
      url: resource, 
      dataType: "html", 
      success: function(html) { 
       html = html.replace(/{{(.+)}}/g, function(match, variable) { 
        return variables[variable]; 
       }); 
       $self.html(html); 
      } 
     }); 
    }); 
}; 

Tous les jetons {{variable}} seront remplacer par ses propriétés appropriées de l'objet donné est passé à la fonction.

<!-- template.tpl --> 
<h1>Hello my name is {{name}}!</h1> 

$("#selector").loadtemplate("template.tpl", { 
    name: "World" 
});​ 

An example fiddle here.

Questions connexes