web-dev-qa-db-fra.com

Bibliothèque de modèles HTML JavaScript recommandée pour JQuery?

Des suggestions sur la bibliothèque de modèles HTML qui irait bien avec JQuery? Google recherche un certain nombre de bibliothèques, mais je ne sais pas s'il existe une bibliothèque bien reconnue qui résisterait à l'épreuve du temps.

javascriptjquerytemplates
89
Shiva

Eh bien, pour être franc, les modèles côté client sont très chauds de nos jours, mais tout à fait une jungle.

les plus populaires sont, je crois:

  • pure : Il utilise uniquement js, pas sa propre "syntaxe"
  • moustache : assez stable et sympa j'ai entendu.
  • jqote2 : extrêmement rapide selon jsperfs
  • modèles jquery (obsolètes):

il y en a beaucoup d'autres, mais vous devez les tester pour voir ce qui vous convient, et votre style de projet, le mieux.

Personnellement, j'ai du mal à ajouter une nouvelle syntaxe et un ensemble de logique ( mélangeant logique et modèle, bonjour ?? ), et je suis devenu pur js. Chacun de mes modèles est stocké dans son propre fichier html (./usersTable.row.html). J'utilise des modèles uniquement lors de l'ajaxation de contenu, et j'ai quelques fichiers js "logiques", un pour les tables, un pour les div, un pour les listes. et même pas pour les options de select (où j'utilise une autre méthode).

Chaque fois que j'essayais de faire quelque chose de plus complexe, je découvrais que le code était moins clair et me prenait plus de temps pour me stabiliser que de le faire "à l'ancienne". La logique dans le modèle est un non-sens absolu à mon avis, et l'ajout de sa propre syntaxe n'ajoute que des bogues très difficiles à tracer.

58
roselan

jTemplates

un moteur de modèle pour JavaScript.

Plugin pour jQuery ...

Fonctionnalités:

  • 100% en JavaScript
  • précompilateur
  • Soutenir JSON
  • Travailler avec Ajax
  • Autoriser l'utilisation de code JavaScript dans le modèle
  • Autoriser la création de modèles en cascade
  • Permet de définir des paramètres dans les modèles
  • Rafraîchissement en direct! - mise à jour automatique du contenu du serveur ...
14
redsquare

Il existe un document de discussion raisonnable sur ce sujet ici , qui couvre une gamme d'outils de création de modèles. Pas spécifique à jQuery, cependant.

8
Marc Gravell

Plugin jQuery Templates créé par Microsoft et accepté comme plugin jQuery officiel.

Mais notez qu'il est désormais obsolète.

5
Andrey

Je vérifierais json2html , il renonce à écrire des extraits HTML et s'appuie plutôt sur les transformations JSON pour convertir les tableaux d'objets JSON en listes non structurées. Très rapide et utilise la création DOM.

4
Chad Brown

Il y a quelques années, j'ai construit IBDOM: http://ibdom.sf.net/ | Depuis décembre 2009, il prend en charge la liaison jQuery si vous l'obtenez directement depuis le coffre.

$("#foo").injectWith(collectionOfJavaScriptObjects);

ou

$("#foo").injectWith(simpleJavaScriptObject);

De plus, vous pouvez désormais placer tous les marqueurs "data: propName" dans les attributs class = "data: propName other classnames", de sorte que vous n'ayez pas à jeter le contenu de votre application avec ces marqueurs.

Je n'ai pas encore mis à jour un tas de documentation pour refléter mes améliorations récentes, mais j'ai eu différentes versions de ce cadre en production depuis 2007.

Aux sceptiques de cette question:

À l'époque où Microsoft a inventé avec IE5 ce que nous connaissons maintenant sous le nom de XmlHttpRequest et le modèle "ajax", une partie de la promesse derrière cela était d'échanger purement des données entre un navigateur Web et le serveur. Ces données devaient être encapsulées en XML, car en 1999/2000, XML était tout simplement tellement très chaud. Au-delà de la récupération d'un document xml sur le réseau avec un mécanisme de rappel, le composant MSXML ActiveX de MS a également pris en charge une implémentation préalable de ce que nous connaissons maintenant sous le nom de XSL-T et XPath.

La combinaison de la récupération de HTTP/XML, XPath et XSL-T a donné aux développeurs une énorme créativité pour créer des "documents" riches qui se comportaient comme des "applications", purement envoyant, et plus important encore, récupérant des données du serveur.

Pourquoi est-ce un modèle utile? Cela dépend de la complexité de votre interface utilisateur et de l'importance que vous accordez à sa maintenabilité.

Lorsque vous créez une interface balisée sémantiquement visuellement très riche avec CSS avancé, la dernière chose que vous voulez faire est de découper des morceaux de balisage en "mini-contrôleur/vues", juste pour que vous puissiez .innerHTML un fragment de document dans le principal document, et voici pourquoi.

L'un des principes clés de la gestion d'une interface utilisateur html/css avancée est de conserver sa validation au moins pendant sa phase active de développement. Si votre balisage est valide, vous pouvez vous concentrer sur vos bogues CSS. Maintenant, si des fragments de balisage finissent par être injectés au cours des différentes étapes de l'interaction avec l'utilisateur, tout devient très difficile à gérer, et le tout devient fragile.

L'idée était d'avoir toutes vos constructions d'interface utilisateur de balisage dans un seul document, de récupérer UNIQUEMENT DES DONNÉES sur le réseau et d'utiliser un cadre solide qui injectez tout au moins vos données dans vos constructions de balisage, et tout au plus répliquez les constructions de balisage que vous avez signalées comme répétables.

Cela était possible avec XSL-T et XPath dans IE5 +, mais pratiquement aucun autre navigateur. Certains frameworks de navigateur F/OSS ont été testés avec XPath mais ce n'est pas tout à fait quelque chose sur lequel nous pouvons compter pour l'instant.

Alors, quelle est la prochaine meilleure chose pour réaliser un tel modèle? IBDOM. Obtenez les données de votre serveur, injectez-les dans votre document. sans effort.

3
Chris Holland

Vous devriez jeter un œil aux modèles Javascript, c'est un petit moteur de modèle utilisé dans le célèbre plugin jQuery File Upload, et développé par le même auteur, Sebastian Tschan (@blueimp)

https://github.com/blueimp/JavaScript-Templates

Suivez le guide d'utilisation fait par Sebastian, juste supprimez cette ligne 

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Remplacez-le par celui-ci 

$('#result').html(tmpl('tmpl-demo', data));

N'oubliez pas d'ajouter également la balise de résultat div dans votre fichier HTML

<div id="result"></div>

Prendre plaisir

2
vinzcelavi