首页 > 语言 > JavaScript > 正文

node.js中EJS 模板快速入门教程

2024-05-06 15:17:31
字体:
来源:转载
供稿:网友

Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的)。安装 EJS 命令如下:

npm install ejs

JS 调用

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> <% } %> 

names 成了本地变量。

选项参数

第二个参数是数据,一般是一个对象。而这个对象又可以视作为选项,也就是说数据和选择都在同一个对象身上。

如果不想每次都都磁盘,可需要缓存模板,设定 options.filename  即可。例如:

var ejs = require('../')  , fs = require('fs')  , path = __dirname + '/functions.ejs'  , str = fs.readFileSync(path, 'utf8');  var users = [];  users.push({ name: 'Tobi', age: 2, species: 'ferret' }) users.push({ name: 'Loki', age: 2, species: 'ferret' }) users.push({ name: 'Jane', age: 6, species: 'ferret' })  var ret = ejs.render(str, {  users: users,  filename: path });  console.log(ret); 

相关选项如下:

    cache Compiled functions are cached, requires filename filename 缓存的键名称 scope 函数执行的作用域 debug Output generated function body compileDebug When false no debug instrumentation is compiled client Returns standalone compiled function

inculde 指令

而且,如果要如

<ul> <% users.forEach(function(user){ %>  <% include user/show %> <% }) %></ul>

一般插入公共模板,也就是引入文件,必须要设置 filename 选项才能启动 include 特性,不然 include 无从知晓所在目录。

模板:

<h1>Users</h1>  <% function user(user) { %>  <li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li> <% } %>  <ul>  <% users.map(user) %> </ul> 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选