web-dev-qa-db-fra.com

Moteurs jQuery

Je cherche un moteur de template pour utiliser le côté client. J'ai essayé quelques-uns comme jsRepeater et jQuery Templates. Bien qu'ils semblent fonctionner correctement dans FireFox, ils semblent tous s'effondrer dans IE7 lorsqu'il s'agit de restituer des tableaux HTML.

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

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

jquerytemplatesjsrender
201
Maurice

Découvrez le message de Rick Strahl sur un client avec jQuery . Il explore jTemplates, mais présente ensuite de meilleurs arguments en faveur de la solution de micro-modèles de John Resig , voire en l’améliorant. Bonnes comparaisons, beaucoup d'échantillons.

109
ewbi

Je viens de faire quelques 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 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 hautement extensible.

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

46
Todd Menier

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

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

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

Merci pour le tuyau, ewbi.

23
KevBurnsJr

jQuery Nano :

Moteur de template

Utilisation de base

En supposant que vous obteniez 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 ...

17
Tomasz Mazur

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 n’a pas été intégré à jQuery 1.5 et sera désormais coordonné par l’équipe de jQuery UI, car il dépendra de la prochaine grille de jQuery UI.

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

13
jonsequitur

Vous ne savez pas comment il gère votre problème spécifique, mais il y a aussi le moteur de template PUR .

11
Chris Vest

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 recherchez le le plus rapide , voici un Nice repère , il semble que DoT gagne et laisse tout le monde derrière

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

Partie I: Modèles JQuery

La bêta, temporairement officielle Le plugin de modèle 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 conserver en version bêta ...

Remarque: l'équipe de jQuery a décidé de ne pas utiliser ce plugin après la version bêta. Il n'est plus activement développé ou maintenu. 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

Les nouvelle feuille de route semblent viser un nouvel ensemble de plugins, JSRender (indépendant du moteur de rendu des modèles DOM et même de JQuery) et JSViews qui ont des liaisons de données Nice et une implémentation de modèle observateur/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 cela n’est pas encore en version bêta et qu’un élément de la feuille de route, mais qu’il semble être un bon candidat pour devenir une extension JQuery/JQueryUI officielle pour les modèles et la liaison de l’UI.

7
Eran Medan

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

5
Ajay Patel

Seulement pour être idiot ^^

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

4
molokoloco

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é-entrante (en ce sens 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).

3
levik

D'autres ont pointé jquery-tmpl, et j'ai voté en faveur de ces réponses. Mais assurez-vous de jeter un coup d'œil aux fourches de github.

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

2
Yann

Si vous travaillez dans le .NET Framework 2.0/3.5, vous devriez jeter un coup d’œil sur JBST tel qu’implémenté par http://JsonFx.net . Il dispose d'une solution de gabarit côté client qui utilise la syntaxe JSP/ASP 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. Cela fonctionne bien avec jQuery et d'autres bibliothèques JavaScript car les modèles eux-mêmes sont compilés en JavaScript pur.

1
mckamey

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

1
EShy

Pour un travail très léger, jquery-tmpl est suffisant, mais il faut dans certains cas que les données sachent se formater (mauvais!).

Si vous cherchez un plugin de templates plus complet, je vous conseillerais Orange-J . Il a été inspiré par Freemarker. Il prend en charge si, sinon, les boucles sur les objets et les tableaux, le javascript en ligne, y compris les modèles dans les modèles, offre d'excellentes options de formatage pour la sortie (maxlen, motboundary, htmlentities, etc.).

Oh, et syntaxe facile.

1
Donovan Walker

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

1
morgancodes

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

Un problème avec de nombreuses solutions de modèles répertoriées (jQote, jquery-tmpl, jTemplates) est qu’elles vous obligent à insérer du 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 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ée moi-même. Je laisse donc le soin aux votes de décider si d'autres l'apprécient ou non. Au moins jusqu'à ce que j'ai 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 beaucoup depuis sa publication d'origine. Pour plus d'informations, voir http://javascriptly.com/2008/08/a-better-javascript-template-engine/ .

0
studgeek

Dropbox utilisant moteur de template de John Resig sur le site web. Ils l'ont un peu modifié, vous pouvez vérifier dans ce fichier js de la liste déroulante. Recherchez dans ce fichier tmpl et vous coderez le moteur de template.

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

0
s-sharma

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

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

0
Bny