EJS模版快速入门

一、什么是EJS

       EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。下载地址：http://embeddedjavascript.googlecode.com/files/ejs_1.0_developer.zip

二、为什么要使用EJS

       与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下，一起来享受下令人激动的干净简洁的感觉。

   总之可以让代码更加干净整洁，让人易懂。

三、通过一个实验，来讲解如何使用EJS

这是后台返回的json数据格式：

{title:'Cleaning Supplies'supplies: ['mop', 'broom', 'duster']}

实现效果：根据json数据，在页面上生成一个带连接的无序列表来展示：

使用javascript代码拼装的方式生成html字符串

var html = "<h1>"+data.title+"</h1>"html += "<ul>"for(var i=0; i<data.supplies.length; i++) {    html += "<li><a href='supplies/"+data.supplies[i]+"'>"    html += data.supplies[i]+"</a></li>"}html += "</ul>"

这种JavaScript拼装的方式,html代码和js代码混合在一起，不利于维护修改。


通过EJS来生成html字符串


一、创建一个ejs模版文件

<h1><%= title %></h1><ul>    <% for(var i=0; i<supplies.length; i++) { %>        <li>            <a href='supplies/<%= supplies[i] %>'>                <%= supplies[i] %>            </a>        </li>    <% } %></ul>

二、在需要使用ejs模版的html文件中加入一下代码

<script type="text/javascript" src="ejs_production.js"></script>

//加载模板文件，并根据data渲染,生成html字符串, data是个json对象

var html = new EJS({url: 'cleaning.ejs'}).render(data);

四、EJS更新元素模版内容

var html = new EJS({url: 'cleaning.ejs'}).render(data);

update方法的第一个参数是需要更新的元素id, 第二个参数可以是个json对象，或一个json URL


五、通过EJS提供的view helper简化代码,这些视图组件，正在完善中.....

<li>    <a href='supplies/<%= supplies[i] %>'>        <%= supplies[i] %>    </a></li>

上面代码等价于下面代码

<li>    <%= link_to(supplies[i], 'supplies/'+supplies[i]) %></li>

六、EJS模版错误处理

如果你有一个错误在EJS模板，EJS会指出发生在错误的确切行号。你需要做的是在你的页面中包含ejs_jslint.js，你可以在谷歌代码下载。如果你正在使用JavaScript调试器，该错误将出现在您的控制台。


七、EJS模版缓存
EJS默认是开启模版缓存。这样在一个页面中多次请求模版文件时，只会请求一次。
可以通过代码设置是否开启缓存：EJS.config({cache: false});//关闭缓存