一、什么是EJS
实现效果:根据json数据,在页面上生成一个带连接的无序列表来展示:
这种JavaScript拼装的方式,html代码和js代码混合在一起,不利于维护修改。
通过EJS来生成html字符串
一、创建一个ejs模版文件
二、在需要使用ejs模版的html文件中加入一下代码
//加载模板文件,并根据data渲染,生成html字符串, data是个json对象
四、EJS更新元素模版内容
update方法的第一个参数是需要更新的元素id, 第二个参数可以是个json对象,或一个json URL
五、通过EJS提供的view helper简化代码,这些视图组件,正在完善中.....
上面代码等价于下面代码
六、EJS模版错误处理
如果你有一个错误在EJS模板,EJS会指出发生在错误的确切行号。你需要做的是在你的页面中包含ejs_jslint.js,你可以在 谷歌代码下载。如果你正在使用JavaScript调试器,该错误将出现在您的控制台。
七、EJS模版缓存
EJS默认是开启模版缓存。这样在一个页面中多次请求模版文件时,只会请求一次。
可以通过代码设置是否开启缓存:EJS.config({cache: false});//关闭缓存
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});//关闭缓存