Il existe de nombreuses options pour les modèles Open Source Node, mais il est recommandé que des personnes âgées comme moi utilisent des EJ. Il est naturel d'utiliser des EJ avec une expérience dans ASP / PHP / JSP classique. C'est-à-dire que vous pouvez organiser le code JavaScript dans le bloc <% ...%> et utiliser <% = la variable de sortie%> de la manière la plus traditionnelle (en outre, <% - les variables de sortie n'échapperont pas aux symboles tels que &). La commande d'installation EJS est la suivante:
NPM Installer EJS
Appel js
Il existe deux méthodes principales appelées par JS:
ejs.compile (str, options); // => fonction ejs.render (str, options); // => str
En fait, les EJ peuvent être utilisés indépendamment de l'express, par exemple:
var ejs = require (''), str = require ('fs'). readFileSync (__ dirname + '/list.ejs', 'utf8'); var ret = ejs.render (str, {noms: ['foo', 'bar', 'baz']}); console.log (ret); Voir ejs.render (). Le premier paramètre est la chaîne du modèle, et le modèle est le suivant. <% if (names.length) {%> <ul> <% names.ForEach (function (name) {%> <li foo = '<% = name + "'"%> '> <% = name%> </li> <%})%> </ul> <%}%>Les noms deviennent des variables locales.
Paramètres d'option
Le deuxième paramètre est les données, qui sont généralement un objet. Cet objet peut être considéré comme une option, ce qui signifie que les données et la sélection sont sur le même objet.
Si vous ne voulez pas avoir de disques à chaque fois, vous devez mettre en cache le modèle et définir des options.FileName. Par exemple:
var ejs = require ('../'), fs = require ('fs'), path = __dirname + '/functions.ejs', str = fs.readfilesync (path, 'utf8'); var utilisateurs = []; users.push ({nom: 'tobi', Âge: 2, espèces: 'Ferret'}) Users.push ({name: 'Loki', Âge: 2, espèces: 'Ferret'}) Users.push ({name: 'Jane', Âge: 6, Espèce: 'Ferret'}) Var Ret = ejsrender (Str, {useurs: utilisateurs: utilisateurs, filename: Path}); console.log (ret);commande inculde
Et, si tu veux
<ul> <% utilisateurs.ForEach (fonction (utilisateur) {%> <% Inclure l'utilisateur / show%> <%})%> </ul>Généralement, l'insertion d'un modèle commun, c'est-à-dire l'introduction d'un fichier, vous devez définir l'option de nom de fichier pour démarrer la fonctionnalité d'inclusion, sinon inclure ne connaîtra pas le répertoire où il est situé.
modèle:
<h1> utilisateurs </h1> <% fonction utilisateur (utilisateur) {%> <li> <strong> <% = user.name%> </strong> est un <% = user.age%> anciens <% = user.speciques%>. </li> <%}%> <ul> <% Users.map (user)%> </ul>EJS prend en charge les modèles de compilation. Après la compilation du modèle, il n'y a pas de fonctionnement IO, il sera très rapide et peut être utilisé pour les variables locales. L'exemple suivant utilisateur / show ignore l'extension EJS:
<ul> <% utilisateurs.ForEach (fonction (utilisateur) {%> <% Inclure l'utilisateur / show%> <%})%> </ul>Token proche personnalisé
Si vous prévoyez d'utiliser <h1> {{= title}} </h1> Généralement non - <%%>, vous pouvez également le personnaliser.
var ejs = require ('ejs'); ejs.open = '{{'; ejs.close = '}}'; La sortie du format est également OK. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Appelé:<p> <% =: utilisateurs | dernier%> </p>EJS prend également en charge les environnements de navigateur.
<Html> <A-head> <script src = "../ ejs.js"> </ script> <script id = "users" type = "text / template"> <% if (names.length) {%> <ul> <% names.forEach (function (name) {%> <li> <% = name%> </li> <%})%> </ul> <fr function () {var utilisateurs = document.getElementById ('utilisateurs'). innerHTML; var noms = ['Loki', 'Tobi', 'Jane']; var html = ejs.render (utilisateurs, {noms: noms}); document.body.innerhtml = html; } </ script> </ head> <body> </ body> </html> Je me demande si EJS peut sortir des objets JSON multicouches?Soit dit en passant, certains internautes ont révélé que JQ Master John a écrit un modèle de 20 lignes il y a plusieurs années, qui a honte, similaire à EJS mais court et concis!
Moteur de modèle JS simple et pratique
Un moteur de modèle JS avec moins de 50 lignes prend en charge diverses syntaxes JS:
<script id = "test_list" type = "text / html"> <% = for (var i = 0, l = p.list.length; i <l; i ++) {var stut = p.list [i]; =%> <tr> <td <% = if (i == 0) {=%> <% =} =% >> <% == stu.name =%> </td> <% == (Stu.address || '' ') =%> </td> <td> <td> <tr> <% =%> </%> </td> <td>"<% = xxx =%>" est le code logique JS, et "<% == xxx =%>" est la variable de sortie directe, similaire à la fonction d'Echo en php. "P" est le paramètre de l'objet KV lors de l'appel de la méthode de construction suivante. Il peut également être défini sur un autre nom de paramètre lors de l'appel "New Jtemp"
Appelé:
$ (function () {var temp = new Jtemp ('test_list'), html = temp.build ({list: [{name: 'zhang san', Âge: Âge, adresse: 'beijing'}, {name: 'li si', Âge: 17, Adresse: 'Tianjin'}, {name: 'wang wu', âge: 13}); $ ('table'). html (html);});Une fois la température ci-dessus générée, la méthode de construction peut être appelée plusieurs fois pour générer du HTML. Voici le code du moteur du modèle:
var jtemp = function () {fonction temp (htmlid, p) {p = p || {}; // Informations de configuration, dans la plupart des cas, this.htmlid = htmlid; this.fun; this.oname = p.oname || 'p'; this.temp_s = p.Temps || '<% ='; this.temp_e = p.tempe || '=%>'; this.getFun (); } Temp.prototype = {getFun: function () {var _ = this, str = $ ('#' + _.htmlid) .html (); if (! str) _.err ('Erreur: pas de température !!'); var str_ = 'var' + _.oname + '= this, f = /' / ';', s = str.indexof (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; pour (; s> = 0;) {e = str.indexof (_. temp_e); if (e <s) alert (':( error !!'); str_ + = 'f + = /' '+ str.substring (0, s) +' / ';'; p = _.trim (str.substring (s + sl, e)); if (p.indexof ('=')! == 0) {// js instruction STR_ + = p; P.SubString (1) + ';';} str = str.substring (e + el); }, Build: Fonction (P) {return this.fun.call (P);Le noyau est de convertir le code de modèle en une fonction qui épisse les chaînes, et chaque fois que vous prenez la fonction d'appel de données.
Étant donné qu'il est principalement utilisé pour les téléphones mobiles (webkits), l'efficacité de l'épissage des chaînes n'est pas prise en compte. S'il doit être utilisé par IE, il est préférable de modifier la méthode d'épissage de la chaîne en la forme de array.push ().
Disposition de mise en page du modèle EJS
1. Si vous n'êtes pas disposé à utiliser la mise en page par défaut. EJS, vous pouvez le spécifier vous-même. Par exemple:
res.render ("index", {"title": "test", "disposition": "main"}); // ou res.render ("index", {"title": "test", "Layout": "main.ejs"});2. Si vous n'êtes pas disposé à utiliser la mise en page, vous pouvez définir la mise en page sur False, par exemple:
res.render ("index", {"Layout": false});3. Si vous ne voulez pas que chaque demande soit définie séparément. Les paramètres globaux peuvent être utilisés:
app.set ("Voir les options", {"Layout": false});4. Dans EJS, la balise de clôture par défaut est <% ..%>, et nous pouvons également définir nos propres balises. Par exemple:
app.set ("View Options", {"Open": "{{", "Close": "}}"});5. Disposition locale
Dans les applications Web, il est souvent nécessaire d'afficher à plusieurs reprises un certain contenu, tel que la fonction de commentaire de l'utilisateur, qui nécessite l'affichage répété du commentaire de chaque utilisateur. Pour le moment, nous pouvons y parvenir à travers des boucles. Cependant, il peut également être implémenté en utilisant [modèle partiel] (partiel). Par exemple:
Tout d'abord, nous créons un modèle local./views/comment.ejs:
<div> <div> <% = comment.user%> </div> <div> <% = comment.Content%> </div> </div>
Remarque: voici comment.xxxx
Puis dans ./views/index.ejs, appelez le commentaire via partiel
Ceci est <% = title%>! <br/> <% - partiel ("comment", commentaires)%>Remarque: voici partiel ("comment.ejs", commentaires); <- le mot devrait être pluriel.
Enfin, dans le routeur, appelez l'index.ejs.
app.get("/",function(req,res){ res.render("index",{"title":"test","layout":false,"comments":[ {"user":"gainover","content":"test1"}, {"user":"zongzi","content":"test2"}, {"user":"maomao","content":"test3"} ]});});Remarque: Les commentaires dans le code sont les mêmes que le nom de variable de commentaires d'Index.ejs, et dans commentaire.ejs appelé par partiel, la forme singulière de commentaire est utilisée.
Lorsque les listes sont affichées, le scénario que nous rencontrons généralement est d'afficher le premier élément ou le dernier élément spécialement. En partie, nous pouvons utiliser les variables intégrées dans Express pour déterminer si l'objet actuel est le premier élément ou le dernier élément, par exemple:
<div> <div> <% = comment.user%> </div>: <div> <% = comment.Content%> </div> </div>
De cette façon, il y aura un FirstItem supplémentaire dans la classe du premier commentaire.
Des variables intégrées similaires comprennent:
(1) FirstIncolEction est vraie si c'est le premier élément du tableau
(2) IndexIncollection L'indice de l'élément actuel dans le tableau
(3) LastInccollection est vraie si c'est le dernier élément du tableau
(4) CollectionLength
Enfin, il y a le problème de recherche de chemin lorsque Partial appelle le modèle:
(1) Partial ("Edit") recherchera le fichier edit.ejs dans le même répertoire.
(2) Partial ("../ message") recherchera le fichier message.ejs du répertoire de niveau précédent.
(3) Partial ("utilisateurs") recherchera le fichier utilisateur.ejs. Si des utilisateurs.ejs n'existent pas, le fichier /Users/index.ejs sera recherché.
(4) <% = utilisateurs%> échapperont au contenu. Si vous souhaitez y échapper, vous pouvez utiliser <% - utilisateurs%>