[javascript] ​​view plain​​​​copy​​

 


  2. var app=require("express").createServer();  
  3. app.set("view engine","ejs");  
  4.                                                                                                                                                                                                                           
  5. app.get("/",function(req,res) {  
  6.     res.render("index",{"title":"test"});  
  7. });  
  8. 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个步骤。

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

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


 


 




[javascript] ​​view plain​​​​copy​​

 


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


 

或


 


 




[javascript] ​​view plain​​​​copy​​

 


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


 

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


 


 




[javascript] ​​view plain​​​​copy​​

 


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


 

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


 


 




[javascript] ​​view plain​​​​copy​​

 


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


 

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


 


 




[javascript] ​​view plain​​​​copy​​

 


  2. app.set("view options",{  
  3.    "open":"{{",  
  4.    "close":"}}"  
  5. });  


 

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

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

Template Engines

Below are a few template engines commonly used with Express:

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

  2. 首先我们建一个局部的模版 ./views/comment.ejs：[html]view plaincopy
  2. <div class="comment_item">  
  3.     <div class="comment_user"><%=comment.user%></div>  
  4.     <div class="comment_content"><%=comment.content%></div>  
  5. </div>  

注意：这里是comment.xxxx

  1. 然后在./views/index.ejs中，通过partial调用comment[javascript]view plaincopy
  2. this is <%=title%>!  
  3. <br/>  
  4. <%- partial("comment",comments)%>  

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

  1. 最后是在router中，调用index.ejs。[javascript]view plaincopy
  2. var app=require("express").createServer();   
  3.   
  4. app.set("view engine","ejs");  
  5.   
  6. app.get("/",function(req,res){  
  7.     res.render("index",{"title":"test","layout":false,"comments":[  
  8.         {"user":"gainover","content":"test1"},  
  9.         {"user":"zongzi","content":"test2"},  
  10.         {"user":"maomao","content":"test3"}  
  11.     ]});  
  12. });  
  13.   
  14. app.listen(3000);  

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

  1. 查看源代码：效果图如下：在列表显示时，我们通常会遇到的场景是，对第一个元素或者最后一个元素加以特殊显示。在partial中，我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素，例如:[javascript]view plaincopy
  2. <div class="comment_item<%if(firstInCollection){%> firtitem <%}%>">  
  3.     <div class="comment_user"><%=comment.user%></div> :  
  4.     <div class="comment_content"><%=comment.content%></div>  
  5. </div>  

这样第一条评论的 class 里就会多一个firstitem。

类似的内置变量还有：

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

  1. 最后是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