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


原贴地址

                                                                                                 
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个步骤。

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

  2. 接着,会读取./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:

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

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

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

    注意:这里是comment.xxxx

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

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

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

  3. 最后是在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 的单数形式。

  4. 查看源代码:效果图如下:

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

    在列表显示时,我们通常会遇到的场景是,对第一个元素或者最后一个元素加以特殊显示。在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。

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

    类似的内置变量还有:

    firstInCollection 如果是数组的第一个元素,则为true
    indexInCollection 当前元素在数组里的索引
    lastInCollection 如果是数组的最后一个元素,则为true
    collectionLength 数组的长度

     

  5. 最后是partial调用模版时的路径查找问题:

    partial("edit") 会查找同目录下的edit.ejs文件。

    partial("../message") 会查找上一级目录的message.ejs文件。

    partial("users") 会查找 users.ejs文件,如果不存在users.ejs, 则会查找 /users/index.ejs文件。

     

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


5 responses on “nodejs express template (模版)的使用 (ejs + express)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>