Modèles HTML en Javascript? Sans codage de la page?
Je suis un gars web, principalement pour Perl côté serveur trucs, et je suis lentement à arriver à quelques conclusions.
- Il est de loin préférable de faire la plupart de votre code via Javascript et mélanger les données via AJAX que c'est de frapper soumettre et recharger la plupart de page identiques
- J'aime jQuery parce que j'aime CSS, et c'est un plaisir de la chaîne d'ensemble, gros long et effrayant à d'autres définitions
- Il y a quelque chose que les gabarits des trucs.
Vous voulez que vos éléments HTML pour ressembler à vos éléments HTML, et c'est plus facile à définir que dans le HTML:
<div class="sidebar_elem">
<a href=""> TEXT</a>
</div>
Que c'est de bricoler le même en Javascript ou jQuery:
( '<div/>' )
.attr('id' , 'sidebar_elem' + i )
.addclass( 'sidebar_elem' )
;
( '<a/>' )
.attr('href' , link_url )
.appendTo( '#sidebar_elem' + i )
;
C'est-à-dire que je ne suis plus un template agnostique, mais je ne sais pas quel outil de création de modèles de croire dans. J'ai regardé dans certains jQuery-modèle basé sur des plugins, mais je n'ai pas encore de devenir heureux avec l'un d'eux, en partie parce que ceux que j'ai vu semblent vouloir mettre tout ce code dans la page elle-même, qui rompt le "Seul le balisage va dans des fichiers HTML, seulement un style va dans les fichiers CSS, seul le code va dans les fichiers JS" mantra-je garder récitant.
Donc, je suis à la recherche d'un Javascript de gabarits outil qui me permettrait d'avoir mes modèles en dehors de fichier afin que je puisse avoir un changement de modèle de couvrir une série de pages web. Si c'est jQuery, qui est grande, moins de choses que j'ai à apprendre, mais ce n'est pas un deal-breaker.
"c'est un plaisir de la chaîne d'ensemble, gros long et effrayant à d'autres définitions de" je ne vous aime pas 🙁
Répondre à quatre-année-vieille questions: je pourrais envoyer le TARDIS pour les attirer dans l'avenir, Daniel. Ouais, c'est snark, mais pour la plupart de ce que j'écris avec le Javascript, je peux compter mes utilisateurs sur une seule main. Je ne peux citer pour vous, aussi, et je sais qu'ils s'exécutent tous std-version de Firefox. Raynos, oui, c'est amusant à faire, mais oui, c'est bien de moins en moins de plaisir à essayer de corriger dit enchaîné les définitions. C'est pourquoi je suis désireux de modèle. Je suis allé avec Moustache jusqu'à présent.
OriginalL'auteur Dave Jacoby | 2010-08-27
Vous devez vous connecter pour publier un commentaire.
Comment sur EJS?
Exemple à partir de leur page:
"EJS combine des données et un modèle pour produire un code HTML".
De données:
Modèle:
Résultat:
OriginalL'auteur cofiem
Il y a plusieurs bons là-bas:
Mustache.js
Pure.js
Json Modèle
Si vous voulez une version jQuery, La tempête semble bon.
OriginalL'auteur Sean Vieira
Les 2 libs je sais que de ne pas mélanger modèle de codage avec les balises HTML sont chain.js et PURE
chain
ne fait que des manipulations DOM.PURE
utilise un mélange de DOM etinnerHTML
que les DOM ne peut être que lent à rendre de plus grands modèles.Je suis le principal contributeur de la PURE, et nous l'avons créé pour construire une application web sur le modèle ajax-vous décrire.
OriginalL'auteur Mic
Jeter un oeil à celui-ci http://ejohn.org/blog/javascript-micro-templating/. Faite par John Resig, le créateur de jQuery, celui-ci n'a même pas besoin de jQuery, et c'est ridiculement petit. Il stocke également des modèles dans la balise de script (Daniel réponse). Exemple de modèle:
Peut-être que vous pouvez les charger à l'aide d'attribut src, si vous avez vraiment besoin d'eux pour être dans des fichiers distincts, dont je ne pense que c'est une bonne idée, car cela signifie supplémentaire aller-retour vers le serveur. Ainsi, à la fin, pour des raisons d'optimisation, vous pouvez les stocker dans des fichiers distincts, mais de les intégrer côté serveur dans la page qui a besoin d'eux.
OriginalL'auteur skrat
Puisqu'il n'est pas bien définie de l'API et l'un des meilleurs de la bibliothèque pour les templates, je vous suggère d'en choisir un qui est activement développé. Ci-dessous, j'ai expliqué brièvement deux bibliothèques qui sont activement développés.
jQuery équipe a décidé que jQuery Modèles ne seront plus activement développé ou maintenu, donc je suggère fortement de ne PAS l'utiliser. Voir cette entrée de blog.
Vous pouvez utiliser JsRender conformément à JsViews d'en prendre plein la fonctionnalité fournie par jQuery Templates et même plus, comme les données de la liaison. Vous pouvez trouver des démonstrations pour JsRender et JsViews. Je suggère l'utilisation de ces bibliothèques, car ils sont activement développés par jQuery UI mais sachez qu'ils sont même pas encore en bêta!
Moustache est un autre template solution qui est activement développé et qu'il simplifie les modèles en combinant les balises conditionnelles et l'énumération des balises. Il fournit également des caractéristiques fortes comme inversé les sections, les partiels et les ordre élevé de sections avec une syntaxe simple. Moustache est aussi l'un des plus rapides de template solutions Voir le blog de Brian de Landau. J'ai, personnellement, trouver la moustache d'un bon template solution, car il a une syntaxe simple et fonctionne bien.
OriginalL'auteur melihcelik
Que vous devriez vérifier sur google fermeture modèle. Il est totalement indépendant ainsi vous pouvez l'utiliser avec n'importe quel lib vous le souhaitez. C'est un outil de création de modèles écrits en java.
http://code.google.com/closure/templates/docs/helloworld_js.html
Il vous permet de créer un modèle sur le serveur, exécutez une java "compilateur" et la sortie est une fonction javascript qui prend json comme paramètre.
Cela va générer une fonction appelée exemples.helloName qui peut être appelée comme
Leur format est très IDE sympathique, je reçois tout le HTML de la syntaxe lors de l'édition des modèles de
Vous pouvez appeler d'autres modèles à partir de l'intérieur de modèles, il est automatiquement html s'échappe de vos données (sauf si vous lui dites de ne pas), fournit bidirection soutien.
Une autre grande chose est le fait que ce dernier outil permet également de générer du code java. Donc, quelqu'un qui écrit une application qui doit prendre en charge les navigateurs avec des scripts désactivés pouvez générer le code HTML sur le serveur si nécessaire.
Dernière mais pas moins, contrairement à d'autres js systèmes de template (), le modèle est analysé sur le serveur, de sorte que le côté client n'a qu'à faire de la fusion de données et modèle de l'analyse du modèle est fait comme une étape de génération sur le serveur.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate est un exemple de template outil qui fonctionne entièrement sur le client. Il y a deux problèmes avec cette approche, l'analyse du modèle se fait sur le client et de votre code html doit être incorporé dans un javascript chaîne. Cependant, certains Ide (Ide) en surbrillance le code HTML à l'intérieur de JS de chaînes de caractères).
OriginalL'auteur Juan Mendes
Ce sujet JAML Code?
http://github.com/edspencer/jaml
Similaire à un peu de ci-dessus, mais je crois que c'est un peu plus logique...
C'est le concept de la définition de vos modèles via JSON /JavaScript et ensuite à l'aide d'une fonction en JavaScript pour passer des arguments à votre modèle qui obtient rendus et retourné comme un élément.
Il y a des applications pour les différents Frameworks JavaScript qui existent.
OriginalL'auteur Jay
Utiliser un
script
bloc.et l'un des nombreux plugins JQuery.
http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx
OriginalL'auteur Daniel A. White
J'ai un moteur de template appelé stencil.js, qui je crois est assez doux. Il fonctionne avec jQuery via le jquery-haml DOM bâtiment du moteur.
Écrire votre modèle (que vous pouvez le mettre dans un fichier externe et de décodage JSON):
Et le lancer à travers
stencil
avec vos données:Il y a d'autres exemples à la stencil.js projet GitHub, mais je pense que c'est juste ce que vous cherchez.
Il pourrait utiliser un couple de plus de l'utilitaire de méthodes, et un peu de code pour un inachevée de liaison de données composant est toujours dans le
master
de la branche, afin de me laisser un commentaire si vous êtes intéressé et je vais voir si je peux le nettoyer.OriginalL'auteur s4y
découvrez ibdom, et un peu de contexte/histoire ici: Recommandé JavaScript HTML template library JQuery?
OriginalL'auteur
Pourrait toujours aller avec jQuery-Modèles: http://api.jquery.com/category/plugins/templates/
OriginalL'auteur edwardsharp
Ce sujet http://www.enfusion-framework.org
Des trucs comme ça:
OriginalL'auteur Bny