var app=require("express").createServer();
app.set("view engine","ejs");
app.get("/",function(req,res) {
res.render("index",{"title":"test"});
});
app.listen(3000);
app.set("view engine","ejs"); 这句将模版引擎设置为 ejs (http://github.com/visionmedia/ejs)
ejs可通过 npm install ejs 来进行安装
2、在app.get中。
res.render("index",{"title":"test"}); 会执行2个步骤。
会读取 ./views/index.ejs文件的内容,然后将其中的title变量替换为test,例如<%=title%>会变为test。假设返回的内容为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、 每个模版引擎的用法都有所异同,总体的使用方法都是上面这样的。
以下是目前常用的模版引擎:
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文件。
Ref: http://node-js.diandian.com/post/2012-07-03/40029704518本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。