moteurs de template jQuery

Je recherche un moteur de template pour utiliser le côté client. J’ai essayé quelques modèles comme jsRepeater et jQuery Templates. Bien qu’ils semblent fonctionner correctement dans FireFox, ils semblent tous se décomposer dans IE7 lorsqu’il s’agit de rendre des tableaux HTML.

J’ai également jeté un coup d’oeil à MicrosoftAjaxTemplates.js (de http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 ), mais il s’avère que présente le même problème.

Des conseils sur d’autres moteurs de template à utiliser?

Jetez un coup d’ œil sur le post- titrage des clients de Rick Strahl avec jQuery . Il explore jTemplates, mais fait un meilleur cas pour la solution de micro- création de John Resig, même en l’améliorant. Bonnes comparaisons, beaucoup d’échantillons.

Je viens de faire des recherches à ce sujet et je vais utiliser jquery-tmpl . Pourquoi?

  1. C’est écrit par John Resig.
  2. Il sera maintenu par l’équipe principale de jQuery en tant que plug-in “officiel”. EDIT: L’équipe de jQuery a déconseillé ce plugin.
  3. Il établit un équilibre parfait entre simplicité et fonctionnalité.
  4. Il a une syntaxe très propre et bien pensée.
  5. Il code HTML par défaut.
  6. C’est très extensible.

Plus ici: http://forum.jquery.com/topic/templating-syntax

jQote: http://aefxx.com/jquery-plugins/jqote/

Quelqu’un a pris la solution de micro-création de Resig et l’a intégrée dans un plugin jQuery.

Je vais l’utiliser jusqu’à ce que Resig publie le sien (s’il sort le sien).

Merci pour le conseil, ewbi.

jQuery Nano :

Moteur de template

Utilisation de base

En supposant que vous avez la réponse JSON suivante:

data = { user: { login: "tomek", first_name: "Thomas", last_name: "Mazure", account: { status: "active", expires_at: "2009-12-31" } } } 

tu peux faire:

 nano("

Hello {user.first_name} {user.last_name}! Your account is {user.account.status}

", data)

et vous êtes prêt chaîne:

 

Hello Thomas Mazure! Your account is active

Page de test …

jQuery-tmpl sera dans le kernel jQuery à partir de jQuery 1.5:

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

La documentation officielle est ici:

http://api.jquery.com/category/plugins/templates/


EDIT: Il a été omis de jQuery 1.5 et sera désormais coordonné par l’équipe d’interface utilisateur jQuery, car il s’agira d’une dépendance de la prochaine grid d’interface utilisateur jQuery.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

Pas sûr de savoir comment il gère votre problème spécifique, mais il y a aussi le moteur de template PURE .

Cela dépend de la façon dont vous définissez “le meilleur”, s’il vous plaît voir mon post ici sur le sujet

Si vous cherchez le plus rapide , voici une belle référence , il semble que DoT gagne et laisse tout le monde derrière

Si vous cherchez le plugin JQuery le plus officiel , voici ce que j’ai découvert

Partie I: Modèles JQuery

La version bêta, temporairement officielle du template JQuery, était-ce http://api.jquery.com/category/plugins/templates/

Mais apparemment, il n’y a pas si longtemps, il a été décidé de le garder en bêta …

Note: L’équipe jQuery a décidé de ne pas prendre ce plugin après la version bêta. Il n’est plus développé ou maintenu activement. Les documents restnt ici pour l’instant (pour référence) jusqu’à ce qu’un plugin de remplacement de modèle approprié soit prêt.

Partie II: la prochaine étape

La nouvelle feuille de route semble viser un nouvel ensemble de plug-ins, JSRender (indépendant du moteur de rendu de modèle JQuery et même de DOM) et JSViews qui ont une bonne liaison de données et une implémentation observateur / modèle observable.

Voici le blog sur le sujet

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

Et voici la dernière source

Autres ressources

Notez que ce n’est pas encore dans la version bêta, et seulement un élément de la feuille de route, mais semble être un bon candidat pour devenir une extension officielle JQuery / JQueryUI pour les modèles et la liaison de l’interface utilisateur

http://garann.github.com/template-chooser/ Ce lien est vraiment utile pour sélectionner un modèle de base Javascript.

Seulement pour être le fou ^^

 // LighTest TPL $.tpl = function(tpl, val) { for (var p in val) tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || ''); return tpl; }; // Routine... var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}], tplHtml = '
N°{id} - {title}
', newHtml = ''; $.each(dataObj, function(i, val) { newHtml += $.tpl(tplHtml, val); }); var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ 😉

Ce n’est pas spécifique à jsquery, mais voici une bibliothèque de templates basée sur JS publiée par google en open source:

http://code.google.com/p/google-jstemplate/

Cela permet d’utiliser des éléments DOM comme modèles et est ré-entrant (en ce sens que la sortie d’un rendu de modèle est toujours un modèle pouvant être restitué avec un modèle de données différent).

D’autres ont indiqué jquery-tmpl, et j’ai accepté ces réponses. Mais assurez-vous de jeter un coup d’œil aux fourches github.

Il existe des correctifs importants et des fonctionnalités intéressantes. http://github.com/jquery/jquery-tmpl/network

John Resig en a un qui est affiché sur son blog. http://ejohn.org/blog/javascript-micro-templating/

Si vous travaillez dans .NET Framework 2.0 / 3.5, vous devriez jeter un coup d’œil à JBST tel qu’implémenté par http://JsonFx.net . Il possède une solution de template côté client qui présente une syntaxe JSP / ASP familière mais qui est précompilée au moment de la construction pour les modèles compacts pouvant être mis en cache qui n’ont pas besoin d’être analysés au moment de l’exécution. Il fonctionne bien avec jQuery et les autres bibliothèques JavaScript car les modèles eux-mêmes sont compilés en JavaScript pur.

J’utilisais jtemplates jquery pluging mais la performance était vraiment mauvaise. Je suis passé à sortingmpath ( http://code.google.com/p/sortingmpath/wiki/JavaScriptTemplates ), qui offre de bien meilleures performances. Je n’ai pas remarqué de problème avec IE7 ou FF.

Pour des travaux très légers, jquery-tmpl est adéquat, mais il faut dans certains cas que les données sachent se formater (mauvaise chose!).

Si vous recherchez un plug-in de modélisation plus complet, je vous suggère Orange-J . Il a été inspiré par Freemarker. Il supporte if, sinon, les boucles sur les objects et les tableaux, javascript en ligne, y compris les modèles dans les modèles et a d’excellentes options de formatage pour la sortie (maxlen, wordboundary, htmlentities, etc.).

Oh, et la syntaxe facile.

Vous voudrez peut-être réfléchir un peu à la manière dont vous souhaitez concevoir vos modèles.

Un problème avec la plupart des solutions de modèles listées (jQote, jquery-tmpl, jTemplates) est qu’elles vous obligent à insérer des éléments non HTML dans votre code HTML, ce qui peut être difficile à utiliser dans les outils HTML ou dans un processus de développement avec des concepteurs HTML. . Personnellement, je n’aime pas la sensation de cette approche, même si elle a ses avantages et ses inconvénients.

Il existe une autre classe d’approches de modèles qui utilisent le HTML normal, mais vous permettent d’indiquer des liaisons de données avec des atsortingbuts d’élément, des classes CSS ou des mappages externes.

Knockout est un bon exemple de cette approche, mais je ne l’ai pas utilisé moi-même, alors je laisse aux votes le soin de décider si d’autres l’aiment ou non. Au moins jusqu’à ce que j’ai le temps de jouer avec elle plus.

PURE répertorié comme une autre réponse est un autre exemple de cette approche.

Pour référence, vous pouvez également regarder chain.js , mais il ne semble pas avoir été mis à jour depuis sa version originale. Pour plus d’informations, voir http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

Dropbox utilisant le moteur de template de John Resig sur le site Web. Ils ont un peu modifié, vous pouvez vérifier dans ce fichier js de la boîte de repository. Recherchez dans ce fichier tmpl et vous coderez le moteur de template.

Merci. J’espère que ce sera utile pour quelqu’un.

J’utilise actuellement un framework multi-HTML. Ce cadre facilite grandement l’importation de données modélisées dans votre DOM. Aussi une excellente modélisation MVC.

http://www.enfusion-framework.org/ (regardez les exemples!)

Il y a aussi une réécriture de PURE par beebole – jquery pure html templates – https://github.com/mpapis/jquery-pure-templates

Il devrait permettre un rendu beaucoup plus automatique en utilisant principalement des sélecteurs de jquery, ce qui est plus important pour ne pas avoir à mettre des choses sophistiquées en HTML.