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


var app=require("express").createServer();
app.set("view engine","ejs");

app.get("/",function(req,res) {
res.render("index",{"title":"test"});
});
app.listen(3000);

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

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

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

2、在app.get中。

res.render("index",{"title":"test"}); 会执行2个步骤。

  1. 会读取 ./views/index.ejs文件的内容,然后将其中的title变量替换为test,例如<%=title%>会变为test。假设返回的内容为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. 查看源代码:效果图如下:

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

     

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

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

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

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

    Ref: http://node-js.diandian.com/post/2012-07-03/40029704518
智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告