关于express与ejs的那点儿事

一、片段试图

有时候从数据库读取一堆数据，要展现到前台，由于展示前不可能清楚有多少个数据项，不可能在前台预先写足够行数的表格，因此肯定是通过动态生成的。express3.0使用所谓“片段视图”完成上述功能。

1、安装插件

npm install express-partial

2、在express中配置加入：

var partials = require('express-partials');

3、在app.set('view engine', 'ejs');语句下面添加：

app.use(partials());

便可以使用片段视图了。首先是后台js文件：

 var items = [

  {username : 'a', role : 'admin'},

  {username : 'b', role : 'admin'},

  {username : 'c', role : 'guest'},

  {username : 'd', role : 'guest'},

 ];

 res.render('account', {items : items});

给到前台页面account.ejs，前台页面的表格部分：

<table class="table table-hover table-bordered">

    <tr>

        <td>用户名</td> 

        <td>权限角色</td>

    </tr> 

    <%- partial('accountItem', items)%>

</table>

然后在新建accountItem.ejs，内容为：

<tr>

<td><%= accountItem.username %></td>

<td><%= accountItem.role %></td>

</tr>

启动服务器，就能查看结果。

二、前台模版变量赋值的问题

如果后台没有把前台模版的变量赋值，那么前台直接使用会报错，例如：

后台a.js文件有一句：

res.render('a',{title : 'express'});

在a.ejs中，有这么一句：

<p><%= data %><p>

那么会报错，因为后台没有送data这个值。解决的办法是在输出这个值之前做判断，需要这么写：

<% if(locals['data']){ %>

       <p><%= data %><p>

<% } %>

这样如果data没赋值，那么不输出，当然该条件判断也可以添加else，当data没赋值时输出别的东西。

当出现以下情况：

后台a.js文件有这两句：

var book = {author : 'tom', title : 'abc'};

res.render('a',{book : book});

前台ejs如何判断author是否为tom呢？应该这么写：

<% if(locals.book.author == 'tom'){ %>

       <p>abc<p>

<% } %>

但是不能通过locals.book.author判断后台是否有对author赋值，要用locals['book']['author']来判断，locals.book同样不能判断后台是否有对book赋值。

三、插入其他ejs页面

有时候页面内容非常多，我们希望前台也跟后台一样模块化，例如某个网站的导航条，某些弹出的模态框，我们希望通过把它们这些小‘页面’独立出来，不仅使主页面代码没那么臃肿，而且模块化也便于管理，我们可以利用ejs的include指令，如下：

<% include myNav.ejs %>

这句插入一个名为myNav.ejs的文件，在我的项目中这个文件是用于显示导航条的。这样这个控制导航条的ejs就可以插入到其他需要的页面中，而且需要修改导航条的时候修改这个ejs文件就可以了，很方便。