Nodejs学习笔记(四)：ejs模板布局 layout

为什么80%的码农都做不了架构师？>>>   

1. 如果不愿意使用默认的layout.ejs，可自行指定。例如：

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

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

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

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

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

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

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

5. 局部布局
在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。

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"}                                                  
    ]});                                                  
});

注意：代码里的 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文件。

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

转载于:https://my.oschina.net/jsan/blog/178407