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 = "
"+data.title+"
"
html += "
"
for(var i=0; i"
    html += data.supplies[i]+""
}
html += "
"

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


通过EJS来生成html字符串


一、创建一个ejs模版文件

<%= title %>

    <% for(var i=0; i
        

            
                <%= supplies[i] %>
            
        
    <% } %>

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

//加载模板文件，并根据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简化代码,这些视图组件，正在完善中.....

    
        <%= supplies[i] %>
    

上面代码等价于下面代码

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

六、EJS模版错误处理

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


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