jQuery templating engine [fermé]

Je recherche un moteur de template à utiliser côté client. J'ai essayé quelques modèles comme jsRepeater et jQuery. Bien qu'ils semblent fonctionner correctement dans FireFox, ils semblent tous tomber en panne dans IE7 en ce qui concerne le rendu des tableaux HTML.

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

Des conseils sur les autres moteurs de modèles à utiliser?

Consultez le post client de Rick Strahl, Templating with jQuery . Il explore les jTemplates, mais fait un meilleur argument pour la solution de micro-modèles de John Resig , même en l'améliorant un peu. Bonnes comparaisons, beaucoup d'échantillons.

Je viens de faire des recherches à ce sujet et j'utiliserai jquery-tmpl . Pourquoi?

1. Il est écrit par John Resig.
2. Il sera maintenu par l'équipe principale de jQuery en tant que plugin "officiel". EDIT: L'équipe jQuery a déprécié 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-modèles de Resig et l'a empaquetée dans un plugin jQuery.

Je vais l'utiliser jusqu'à ce que Resig libère le sien (s'il libère le sien).

Merci pour l'astuce, ewbi.

jQuery Nano :

Moteur de modèle

Utilisation de base

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

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

tu peux faire:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

et vous obtenez la chaîne prête:

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

Page de test ...

jQuery-tmpl sera dans le noyau 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 jQuery UI, car il sera une dépendance de la prochaine grille jQuery UI.

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

Je ne sais pas comment il gère votre problème spécifique, mais il y a aussi le moteur de modèle PURE .

Cela dépend de la façon dont vous définissez le "meilleur", veuillez consulter mon article 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 recherchez le plugin JQuery le plus officiel , voici ce que j'ai découvert

Partie I: Modèles JQuery

Le plugin de modèle JQuery bêta, temporairement officiel, é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 version bêta ...

Remarque: l'équipe jQuery a décidé de ne pas prendre ce plugin au-delà de la version bêta. Il n'est plus développé ni maintenu activement. Les documents restent ici pour le moment (pour référence) jusqu'à ce qu'un plugin de modèle de remplacement approprié soit prêt.

Partie II: la prochaine étape

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

Voici le billet de blog sur le sujet

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

Et voici la dernière source

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

Autres ressources

• Une belle présentation sur le sujet http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates

• Démos de travail: http://borismoore.github.com/jsviews/demos/index.html

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

Seulement pour être stupide ^^

// 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 = '<div>N°{id} - {title}</div>',
    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 modèles 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 rentrant (en ce que la sortie d'un rendu de modèle est toujours un modèle qui peut être restitué avec un modèle de données différent).

D'autres ont pointé jquery-tmpl, et j'ai surévalué ces réponses. Mais assurez-vous de jeter un œ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 qu'il a publié sur son blog. http://ejohn.org/blog/javascript-micro-templating/

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

J'utilisais jtemplates jquery pluging mais les performances étaient vraiment mauvaises. Je suis passé à trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) qui a de bien meilleures performances. Je n'ai remarqué aucun problème avec IE7 ou FF.

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

Si vous recherchez un plugin de modèles plus complet, je vous suggère Orange-J . Il a été inspiré par Freemarker. Il prend en charge if, else, parcourt les objets et les tableaux, le javascript en ligne, y compris les modèles dans les modèles et dispose d'excellentes options de formatage pour la sortie (maxlen, wordboundary, htmlentities, etc.).

Oh, et une syntaxe simple.

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

Un problème avec de nombreuses solutions de modèles répertoriées (jQote, jquery-tmpl, jTemplates) est qu'elles nécessitent que vous insériez du code non HTML dans votre code HTML, ce qui peut être pénible à travailler avec des 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èle qui utilisent du HTML normal, mais vous permettent d'indiquer des liaisons de données avec des attributs 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, je laisse donc le soin aux votes de décider si les autres l'aiment ou non. Au moins jusqu'à ce que j'aie le temps de jouer avec.

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

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

Dropbox utilisant le moteur de modèle de John Resig sur le site Web. Ils l'ont un peu modifié, vous pouvez le vérifier dans ce fichier js de dropbox. Recherchez dans tmpl ce fichier et vous coderez le moteur de modèle.

Merci. J'espère que cela sera utile pour quelqu'un.

J'utilise actuellement un cadre de création de modèles HTML multiple. Ce cadre facilite beaucoup l'importation de données de modèle dans votre DOM. Également 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, principalement à l'aide de sélecteurs jquery, ce qui est plus important, il ne nécessite pas de mettre des choses de fantaisie en HTML.