Существует множество вариантов для шаблонов с открытым исходным кодом, но рекомендуется, чтобы пожилые люди, такие как я, использовали EJS. Естественно использовать EJ с опытом в классическом ASP/PHP/JSP. То есть вы можете организовать код JavaScript в <%...%> блокировать и использовать <%= выходная переменная%> наиболее традиционным способом (кроме того, <%-выходные переменные не будут избегать символов, таких как &). Команда установки EJS выглядит следующим образом:
NPM Установить EJS
JS Call
Есть два основных метода, называемых JS:
ejs.compile (str, options); // => function ejs.render (str, options); // => str
На самом деле, EJS можно использовать независимо от Express, например:
var ejs = require (''), str = require ('fs'). readfilesync (__ dirname + '/list.ejs', 'utf8'); var ret = ejs.render (str, {names: ['foo', 'bar', 'baz']}); console.log (ret); См. EJS.Render (). Первый параметр - это строка шаблона, а шаблон заключается в следующем. < %if (names.length) { %> <ul> < %names.foreach (function (name) { %> <li foo = '< %= name + "'" %> '> < %= name %> </li> < %}) %> </ul> < %} %>Имена становятся локальными переменными.
Параметры опции
Второй параметр - это данные, которые обычно являются объектом. Этот объект может рассматриваться как опция, что означает, что данные и выбор находятся на одном и том же объекте.
Если вы не хотите иметь диски каждый раз, вам нужно кэшировать шаблон и установить Options.filename. Например:
var ejs = require ('../'), fs = require ('fs'), path = __dirname + '/functions.ejs', str = fs.readfilesync (path, 'utf8'); var users = []; users.push ({name: 'tobi', возраст: 2, виды: 'ferret'}) users.push ({name: 'loki', возраст: 2, виды: 'furet'}) users.push ({name: 'jane', возраст: 6, виды: 'ferret'}) var ret = ejs.render (str, use users: upertame: pather}; console.log (ret);Иннулде команда
И, если вы хотите
<ul> < % users.foreach (function (user) { %> < % включает пользователя/show %> < %}) %> </ul>Как правило, вставка общего шаблона, то есть внедрение файла, вы должны установить опцию имени файла, чтобы запустить функцию «Включить», в противном случае не будет знать каталог, где он находится.
шаблон:
<h1> Пользователи </h1> < %функция пользователя (пользователь) { %> <li> <strong> < %= user.name %> </strong> - < %= user.age %> Год < %= user.species %>. </li> < %} %> <ul> < %users.map (user) %> </ul> < %} %> <ul> < %users.map (user) %> </ul> < %} %> <ul> < %.EJS поддерживает компиляцию шаблонов. После компиляции шаблона нет операции ввода -вывода, она будет очень быстро и может использоваться для локальных переменных. Следующий пример пользователь/шоу игнорирует расширение EJS:
<ul> < % users.foreach (function (user) { %> < % включает пользователя/show %> < %}) %> </ul>Пользовательский близкий токен
Если вы планируете использовать <h1> {{= title}} </h1>, как правило, не-<%%> Tag, вы также можете настроить его.
var ejs = require ('ejs'); ejs.open = '{{'; ejs.close = '}}'; Вывод формата также в порядке. ejs.filters.last = function (obj) {return obj [obj.length - 1]; }; Называется:<p> <%=: пользователи | Последний %> </p>EJS также поддерживает среды браузеров.
<html> <Head> <script src = "../ ejs.js"> </script> <script id = "users" type = "text/template"> < %if (names.length) { %> <ul> < %names.foreach (function (имя) { %> <li> < %= name %> </li> < %}) %> <// %> <// %> <// %> <// %> <// %}) <script> onload = function () {var users = document.getElementbyid ('users'). innerhtml; var names = ['loki', 'tobi', 'Jane']; var html = ejs.render (users, {names: names}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> Интересно, может ли EJS вывести многослойные объекты JSON?Кстати, некоторые пользователи сети показали, что мастер JQ Джон написал шаблон на 20 строк несколько лет назад, который стыд, похожий на EJS, но короткий и краткий!
Простой и практичный шаблонный двигатель JS
Анайг JS -шаблон с менее чем 50 линиями поддерживает различные синтаксисы JS:
<script id = "test_list" type = "text/html"> <%= for (var i = 0, l = p.list.length; i <l; i ++) {var stu = p.list [i]; =%> <tr> <td <%= if (i == 0) {=%> <%=} =%>> <%== stu.name =%> </td> <td> <%== stu.age =%> </td> <td> <%== (stu.address || '') =%> <td> <tr> <%=} <%=} <%=} <%=} <%=} =%=.«<%= xxx =%>» - это логический код JS, а «<%== xxx =%>» - переменная прямого вывода, аналогичная функции Echo в PHP. «P» - это параметр объекта KV при вызове следующего метода сборки. Он также может быть установлен на другое имя параметра при вызове «Новый jtemp»
Называется:
$ (function () {var temp = new jtemp ('test_list'), html = temp.build ({список: [{name: 'Zhang San', возраст: 13, адрес: 'beijing'}, {name: 'li si', возраст: 17, адрес: 'tianjin'}, {name: 'wang wu', 13}; $ ('table'). html (html);После того, как вышеупомянутая температура сгенерирована, метод сборки может быть вызван несколько раз для генерации HTML. Вот код для механизма шаблона:
var jtemp = function () {function temp (htmlid, p) {p = p || {}; // Информация о конфигурации, в большинстве случаев, 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 ('error: no temp !!'); var str_ = 'var' + _.oname + '= this, f =/'/';', s = str.indexof (_. temp_s), e = -1, p, sl = _.temp_s.length, el = _.temp_e.length; for (; s> = 0;) {e = str.indexof (_. temp_e); if (e <s) alert (':( ошибка !!'); str_ += 'f +=/' ' +str.substring (0, s) +'/';'; p = _.trim (str.substring (s +sl, e)); if (p.indexof ('=')! == 0) {// js antage P.SubString (1) + ';'; } Build: Function (P) {return.fun.call (p);Ядро состоит в том, чтобы преобразовать код шаблона в функцию, которая разбивает строки, и каждый раз, когда вы принимаете функцию вызова данных.
Поскольку он в основном используется для мобильных телефонов (Webkits), эффективность сплайсинга струн не учитывается. Если это необходимо использовать IE, лучше всего изменить метод сплайсинга строки на форму Array.push ().
макет макета шаблона EJS
1. Если вы не хотите использовать макет по умолчанию. EJS, вы можете указать его самостоятельно. Например:
res.render ("index", {"title": "test", "mayout": "main"}); // или res.render ("index", {"title": "test", "mayout": "main.ejs"});2. Если вы не желаете использовать макет, вы можете установить макет на false, например:
res.render ("index", {"макет": false});3. Если вы не хотите, чтобы каждый запрос был установлен отдельно. Можно использовать глобальные настройки:
app.set ("View Options", {"Mayout": false});4. В EJS заключающий тег по умолчанию < % .. %>, и мы также можем определить наши собственные теги. Например:
app.set ("View Options", {"open": "{{", "close": "}}"});5. местный макет
В веб -приложениях часто необходимо многократно отображать определенный контент, такой как функция комментария пользователя, которая требует повторного отображения комментария каждого пользователя. В настоящее время мы можем достичь этого через петли. Тем не менее, он также может быть реализован с использованием [частичного шаблона] (частичного). Например:
Во -первых, мы создаем локальный шаблон./views/comment.ejs:
<div> <div> <%= comment.user%> </div> <div> <%= comment.content%> </div> </div>
ПРИМЕЧАНИЕ: вот Comment.xxxx
Затем в ./views/index.ejs, позвоните в комментарий через частичный
Это <%= title%>! <br/> <%- Частичный («Комментарий», комментарии)%>
Примечание. Здесь частично ("comment.ejs", комментарии); <- Слово должно быть множественным числом.
Наконец, в маршрутизаторе, вызовы Index.ejs.
app.get ("/", function (req, res) {res.render ("index", {"title": "test", "Mayout": false, "Комментарии": [{"user": "Gainover", "Content": "test1"}, {"пользователь": "Zongzi", "Content": "test2"}, {"" user ":" Maoma "," 3 -го ":" 3 Test ":" 3 Test "? ]});ПРИМЕЧАНИЕ. Комментарии в коде такие же, как и имя переменной комментариев index.ejs, и в комментариях. EJs, называемые частичной, используется единственная форма комментария.
Когда отображаются списки, сценарий, с которым мы обычно сталкиваемся, - это отображение первого элемента или последнего элемента специально. Частично мы можем использовать встроенные переменные в экспрессе, чтобы определить, является ли текущий объект первым элементом или последним элементом, например:
<div> <div> <%= comment.user%> </div>: <div> <%= comment.content%> </div> </div>
Таким образом, в классе первого комментария будет дополнительная первая.
Подобные встроенные переменные включают:
(1) FirstCongollection верно, если это первый элемент массива
(2) Индекснопликация индекса текущего элемента в массиве
(3) LastConcollection верно, если это последний элемент массива
(4) Коллекция длиной
Наконец, есть проблема поиска пути, когда частичные вызовы на шаблоне:
(1) Частичный («Редактировать») будет искать файл edit.ejs в том же каталоге.
(2) Частичный ("../ Message") будет искать файл message.ejs предыдущего каталога уровня.
(3) Partial («Пользователи») будет искать файл users.ejs. Если users.ejs не существует, файл /SERS/Index.ejs будет искать.
(4) < %= Пользователи %> избежат контента. Если вы хотите избежать этого, вы можете использовать < %- пользователи %>