J'essaie de découvrir les nouveaux usages de javascript en tant que langue côté serveur et en tant que langage fonctionnel. Il y a quelques jours, j'ai entendu parler de node.js et du framework express. Ensuite, j'ai vu le fichier underscore.js comme un ensemble de fonctions utilitaires. J'ai vu cette question sur stackoverflow . Il dit que nous pouvons utiliser underscore.js comme moteur de modèle. tout le monde connaît de bons tutoriels sur la façon d'utiliser underscore.js pour les modèles, en particulier pour les débutants qui ont moins d'expérience avec le javascript avancé. Merci
262
Réponses:
Tout ce que vous devez savoir sur le modèle de soulignement est ici . Seulement 3 choses à garder à l'esprit:
<% %>
- pour exécuter du code<%= %>
- pour imprimer une valeur dans le modèle<%- %>
- pour imprimer certaines valeurs HTML échappéesC'est tout.
Exemple simple:
alors
tpl({foo: "blahblah"})
serait rendu à la chaîne<h1>Some text: blahblah</h1>
la source
la source
text/html
si dire quetype="text/html"
c'est un mensonge, les mensonges peuvent causer des problèmes. Vous seriez mieux avec un type précis tel quetext/x-underscore
.type="foo/bar"
parce que je veux que tout le monde sache que cela n'a pas d'importance tant que le navigateur / serveur ne le reconnaît pas et essaie en faire quelque chose. Puisque le html n'est pas un type de script, je me sens assez en sécurité avec text / html (John Resig l'utilise) foo / bar fonctionne aussi :)*/x-*
types pour des utilisations "inventées", je ne pense pas qu'il y ait untext/underscore
type dans les registres officiels, donc j'utilisetext/x-underscore
parce que je suis paranoïaque et ils sont vraiment là pour me trouver.Dans sa forme la plus simple, vous l'utiliseriez comme:
Si vous allez utiliser un modèle plusieurs fois, vous voudrez le compiler pour qu'il soit plus rapide:
Personnellement, je préfère la syntaxe du style Moustache. Vous pouvez ajuster les marqueurs de jeton de modèle pour utiliser des accolades doubles:
la source
interpolate
conseil n'a pas fonctionné, mais cela a fonctionné:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
La documentation pour les modèles est partielle, j'ai regardé la source.
La fonction _.template a 3 arguments:
Si aucune donnée (ou null) n'est donnée, une fonction de rendu sera retournée. Il a 1 argument:
Il y a 3 modèles d'expression régulière et 1 paramètre statique dans les paramètres:
Le code dans une section d' évaluation sera simplement évalué. Vous pouvez ajouter une chaîne de cette section avec la commande __p + = "mystring" au modèle évalué, mais ce n'est pas recommandé (ne fait pas partie de l'interface de modèles), utilisez la section interpoler à la place. Ce type de section sert à ajouter des blocs comme if ou for au modèle.
Le résultat du code dans la section interpoler sera ajouté au modèle évalué. Si null est renvoyé, une chaîne vide sera ajoutée.
La section d' échappement échappe html avec _.escape sur la valeur de retour du code donné. Donc, c'est similaire à un _.escape (code) dans une section interpolée , mais il s'échappe avec \ les espaces comme \ n avant de passer le code au _.escape . Je ne sais pas pourquoi est-ce important, c'est dans le code, mais cela fonctionne bien avec l' interpolation et le _.escape - qui n'échappe pas aux caractères d'espace blanc - aussi.
Par défaut, le paramètre de données est transmis par une instruction with (data) {...} , mais ce type d'évaluation est beaucoup plus lent que l'évaluation avec la variable nommée. Nommer les données avec le paramètre variable est donc quelque chose de bien ...
Par exemple:
résultats
Vous pouvez trouver ici plus d'exemples sur la façon d'utiliser le modèle et de remplacer les paramètres par défaut: http://underscorejs.org/#template
En chargeant le modèle, vous avez de nombreuses options, mais à la fin, vous devez toujours convertir le modèle en chaîne. Vous pouvez le donner comme une chaîne normale comme l'exemple ci-dessus, ou vous pouvez le charger à partir d'une balise de script et utiliser la fonction .html () de jquery, ou vous pouvez le charger à partir d'un fichier séparé avec le plugin tpl de require.js .
Une autre option pour construire l'arbre dom avec laconique au lieu de modeler.
la source
Je donne un exemple très simple
1)
Le résultat serait
2) Ceci est un modèle
C'est html
Ceci est le code javascript qui contient l'objet json et met le modèle en html
la source
avec express c'est si facile. tout ce dont vous avez besoin est d'utiliser le module de consolidation sur le nœud, vous devez donc l'installer:
alors vous devez changer le moteur par défaut en modèle html par ceci:
enregistrez le moteur de modèle de soulignement pour l'extension html:
c'est fait !
Maintenant pour charger par exemple un modèle appelé 'index.html':
J'espère que cela vous a aidé!
la source
Je voulais partager une autre conclusion importante.
l'utilisation de <% = variable => entraînerait une vulnérabilité de script intersite. Il est donc plus sûr d'utiliser à la place <% - variable ->.
Nous avons dû remplacer <% = par <% - pour empêcher les attaques de script intersite. Je ne sais pas si cela aura un impact sur les performances
la source
Lodash est aussi le même Premier écrit un script comme suit:
Maintenant, écrivez quelques JS simples comme suit:
Où popoup est un div où vous souhaitez générer la table
la source