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); 相關選項如下:
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>
新聞熱點
疑難解答
圖片精選