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);

 

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

app.set("view engine","ejs"); 這句將模版引擎設置爲 ejs （http://github.com/visionmedia/ejs）

ejs可經過 npm install ejs 來進行安裝

二、在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的內容。

三、在2中，若是不肯意使用默認的layout.ejs，可自行指定。例如：

 

 

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

 

或

 

 

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

 

四、若是不肯意使用layout，則能夠設置layout爲false，例如:

 

 

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

 

五、若是不想每一個請求都單獨設置一次。可使用全局設置：

 

 

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

 

六、ejs 裏，默認的閉合標記是 <%  .. %>，咱們也能夠定義本身的標籤。例如：

 

 

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

 

七、 每一個模版引擎的用法都有所異同，整體的使用方法都是上面這樣的。

如下是目前經常使用的模版引擎：

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

八、在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