nodejs express template (模版)的使用 (ejs + express)

来源：互联网发布：数据分级英语编辑：程序博客网时间：2024/05/16 08:15

转自：http://www.cnblogs.com/rubylouvre/p/3421805.html

var express = require("express")var app = express();//注册ejs模板为html页。简单的讲，就是原来以.ejs为后缀的模板页，现在的后缀名可以//是.html了app.engine('.html', require('ejs').__express);//设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬app.set('view engine', 'html');//设置模板文件文件夹,__dirname为全局变量,表示网站根目录app.set('views', __dirname + '/views');app.use(express.static(__dirname + '/public'));var users = [    {name: 'tobi', email: 'tobi@learnboost.com'},    {name: 'loki', email: 'loki@learnboost.com'},    {name: 'jane', email: 'jane@learnboost.com'}];app.get('/', function(req, res) {    //向页面模板传递参数，可以传递字符串和对象，注意格式    res.render('users', {        users: users,        title: "EJS example",        header: "Some users"    });});if (!module.parent) {    app.listen(3000);    console.log('Express app started on port 3000');}

//user.html
<% include header.html %>
 
<h1>Users</h1>
<ul id="users">
    <% users.forEach(function(user){ %>
    <li><%= user.name %> <<%= user.email %>></li>
    <% }) %>
</ul>
<hr/>
<script>
    avalon.define("test", function(vm){
        vm.users = <%- JSON.stringify(users) %>
    })
</script>
<ul ms-each-el="users" ms-controller="test">
       <li>{{el.name}} <{{el.email}}></li>
</ul>
 
<% include footer.html %>
 
//header.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> <%= title %> </title>
        <script src="avalon.js"></script>
             
        <style type="text/css">
            body {
                padding: 50px;
                font: 13px Helvetica, Arial, sans-serif;
            }
        </style>
    </head>
    <body>
 
//footer.html
 
</body>
</html>

1、上面是express使用模版的一个基本例子

app.set("view engine","ejs"); 这句将模版引擎设置为 ejs （http://github.com/visionmedia/ejs）

ejs可通过 npm install ejs 来进行安装

2、在app.get中。

res.render('users', { users: users, title: "EJS example", header: "Some users" }); 会执行2个步骤。

会读取 ./views/index.ejs文件的内容，然后将其中的title变量替换为EJS example,例如<%=title%>会变为EJS example。假设返回的内容为content1
接着，会读取./views/layout.ejs，并将其中的body变量替换为content1，例如<%=body%>会变为content1的内容。

3、在2中，如果不愿意使用默认的layout.ejs，可自行指定。例如：

res.render("index",{"title":"test","layout":"main"});

或

res.render("index",{"title":"test","layout":"main.ejs"});

4、如果不愿意使用layout，则可以设置layout为false，例如:

res.render("index",{"layout":false});

5、如果不想每个请求都单独设置一次。可以使用全局设置：

app.set("view options",{                                                                                                                                                                                                                                                                                   "layout":false                                                                                                                                                                                     });

6、ejs 里，默认的闭合标记是 <% .. %>，我们也可以定义自己的标签。例如：

app.set("view options",{                                                                                     "open":"{{",                                                                                     "close":"}}"});

7、每个模版引擎的用法都有所异同，总体的使用方法都是上面这样的。

以下是目前常用的模版引擎：

Template Engines

Below are a few template engines commonly used with Express:

Haml haml implementation
Jade haml.js successor
EJS Embedded JavaScript
CoffeeKup CoffeeScript based templating
jQuery Templates for node

8、在web应用中，经常会需要重复显示某个内容，例如：用户评论功能，需要重复显示出每一条用户的评论，这个时候，我们可以通过循环来实现。但是也可以使用【局部模版】（partial）来实现。例如：

首先我们建一个局部的模版 ./views/comment.ejs：

<div class="comment_item">                                                                    <div class="comment_user"><%=comment.user%></div> :                                                                    <div class="comment_content"><%=comment.content%></div>                                                                </div>

注意：这里是comment.xxxx

然后在./views/index.ejs中，通过partial调用comment

this is <%=title%>!                                                          <br/>                                                          <%- partial("comment",comments)%>

注意：这里是 partial("comment.ejs", comments); <-- 单词要用复数。

最后是在router中，调用index.ejs。

var app=require("express").createServer();                                                                                                                                                       app.set("view engine","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"}                                                      ]});                                                  });                                                                                                                                                       app.listen(3000);

注意：代码里的 comments 和 index.ejs的 comments变量名称一致，而partial所调用的comment.ejs中，则采用 comment 的单数形式。

查看源代码：效果图如下：
在列表显示时，我们通常会遇到的场景是，对第一个元素或者最后一个元素加以特殊显示。在partial中，我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素，例如:
```
<div class="comment_item<%if(firstInCollection){%> firtitem <%}%>">                                   <div class="comment_user"><%=comment.user%></div> :                                   <div class="comment_content"><%=comment.content%></div>                               </div>
```
这样第一条评论的 class 里就会多一个firstitem。
类似的内置变量还有：
firstInCollection 如果是数组的第一个元素，则为true
indexInCollection 当前元素在数组里的索引
lastInCollection 如果是数组的最后一个元素，则为true
collectionLength 数组的长度
最后是partial调用模版时的路径查找问题：
partial("edit") 会查找同目录下的edit.ejs文件。
partial("../message") 会查找上一级目录的message.ejs文件。
partial("users") 会查找 users.ejs文件，如果不存在users.ejs, 则会查找 /users/index.ejs文件。

<%= users %>会对内容进行转义，想不转义，可以用<%- users %>。

阅读全文

0 0