jQuery templating engine [fermé]

204

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?

Maurice
la source
1
Je voulais poser cette question deux fois :)
Mark Schultheiss
1
Je vérifierais les très beaux (mais pré-bêta) JSViews et JSRender, qui semblent être un moteur de template officiel JQuery / UI potentiel (du moins c'est ce que dit la feuille de route)
Eran Medan
1
JsRender a maintenant un candidat bêta public: borismoore.com/2012/03/…
John Papa
J'utilise des modèles DoT maintenant, de bonnes performances et une notation de type moustache
Eran Medan

Réponses:

109

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.

ewbi
la source
3
github.com/jquery/jquery-tmpl est le dépôt réel du plugin de modélisation de Resig.
Alexander Bird
@ Thr4wn, la source de la repro est sensiblement la bibliothèque discutée dans les articles liés. Les deux par Resig cependant, bien sûr.
Frank Schwieterman
@Frank "la source de la repro est significativement alors la bibliothèque discutée dans les articles liés" Um huh? Tu peux répéter s'il te plait? Je ne sais pas du tout ce que vous entendez par là.
Mark Schultheiss
2
@Mark: il voulait dire "significativement différent de."
Domenic
Je n'ai vu aucun exemple de formulaires complexes construits avec cela. Quelqu'un a-t-il exploré ce qu'il faudrait pour ajouter une ligne, une partie d'un modèle entier, pour accueillir un nouvel élément dans le tableau d'un objet lié au formulaire? Le modèle inclurait le modèle des index d'éléments des tableaux et pourrait être correctement sérialisé pour le POST. Mais j'ai du mal à tout réfléchir. L'objectif est une fonctionnalité de type InfoPath. (Je connais les différentes fonctionnalités et alternatives d'infopathe existantes.)
Jason Kleban
47

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

Todd Menier
la source
+1. Mais j'ai utilisé celui de Rick Strahl. Bcoz c'est un petit et sert bien mon but.
IsmailS
il vient d'être annoncé que c'est maintenant un plugin officiel
serg
20
Malheureusement, il a été déprécié . un forker?
OnesimusUnbound
3
Le scénario a-t-il changé maintenant en 2012, je veux dire, y a-t-il de meilleures solutions pour créer des modèles en utilisant des bibliothèques développées en plus du script original de resig?
Rajat Gupta
4
@OnesimusUnbound Il a été super-ensemencé par JS Render. github.com/BorisMoore/jsrender
Blowsie
17

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 ...

Tomasz Mazur
la source
Cela ne fait pas de contrôle des structures (ifs et boucles)
mahemoff
13

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/

jonsequitur
la source
11

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

Chris Vest
la source
en plus de ses limites, PURE est très facile à utiliser
Jader Dias
@Jader, quelles limitations sont les plus douloureuses?
Mic
@Mic PURE est limité par sa conception. Dans les moteurs de modèles côté serveur, vous n'avez pas à vous en tenir à du HTML valide, mais PURE est basé sur du HTML. Mais je pense qu'il y a des bizarreries qui permettraient à un autre moteur de modèle javascript d'être aussi puissant que ceux du côté serveur.
Jader Dias
@Jader, ok pour HTML uniquement. Mais je n'ai pas compris ce que tu veux dire par des bizarreries et un autre moteur.
Mic
@Mic PURE devrait être réécrit à partir de zéro pour permettre l'inclusion de certaines fonctionnalités. Pour autoriser les modèles HTML non valides, vous devez utiliser des scriptbalises dont l'attribut est typedifférent de text/javascript. Il s'agit d'une "bizarrerie" qui autoriserait un code HTML non valide.
Jader Dias du
7

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

Autres ressources

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

Eran Medan
la source
4

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/ ;)

molokoloco
la source
3

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).

levik
la source
2

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

Yann
la source
1
Une fourchette particulière pour rechercher des correctifs?
Kevin Hakanson
TBH, c'est un peu désordonné ... Je suis allé sur github.com/appendto/jquery-tmpl après un rapide survol des changements et compte tenu du fait qu'appendto est une entreprise. YMMV
Yann
jquery-tmpl a été replié dans la distribution officielle 1.4.3.
Yann
1

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.

mckamey
la source
1

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.

Donovan Walker
la source
0

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/ .

studgeek
la source
0

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.

s-sharma
la source
0

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!)

Bny
la source
-1

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.

mpapis
la source