JavaScript模板引擎实例应用
Posted 防空洞123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript模板引擎实例应用相关的知识,希望对你有一定的参考价值。
http://www.cnblogs.com/52fhy/p/5393673.html
artTemplate 不支持requre.js,悲剧啊,只能用juicer啊
这个还是比较有名的。
简介:
artTemplate-3.0 新一代 javascript 模板引擎
https://github.com/aui/artTemplate
template.js (简洁语法版, 2.7kb)
支持if等语句{{ if admin }} {{/if}}
template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数,那么将返回一渲染函数。
性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
支持运行时调试,可精确定位异常模板所在语句(演示)
对 NodeJS Express 友好支持
安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
支持include语句
可在浏览器端实现按路径加载模板(详情)
支持预编译,可将模板转换成为非常精简的 js 文件
模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
支持所有流行的浏览器
artTemplate区分简洁语法版
和原生语法版
。这里先演示简洁语法版
。
使用前同样先引入artTemplate.js
:
<script src="artTemplate/template.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="{{ url }}" class="" target="_blank">
<h4 class="weui_media_title">{{ title }}</h4>
</a>
<p class="weui_media_desc">{{ desc }}</p>
</div>
</script>
<!--/模板-->
注意这里模板与前面的示例不一样了,直接使用一个type="text/html"
的script标签存放模板。artTemplate不支持textarea
标签。
模板里变量使用{{ 变量 }}
占位。
js代码
/本例不再需要手动取模板内容
//var htmlTemp = $("textarea.js-tmp").val();
$.each(data, function(i,el) {
htmlList += template("js-tmp", el); //注意第一个参数是id
});
artTemplate使用基于document.getElementById(id)
的方式直接获取模板内容。这一点与其它模板有点不同,需要注意。
下面再看看artTemplate原生语法版
。
需要引入替换成:
<script src="artTemplate/template-native.js"></script>
模板
<!--模板-->
<script id="js-tmp" type="text/html">
<div class="weui_media_box weui_media_text">
<a href="<%= url %>" class="" target="_blank">
<h4 class="weui_media_title"><%= title %></h4>
</a>
<p class="weui_media_desc"><%= desc %></p>
</div>
</script>
<!--/模板-->
原生语法版
的artTemplate模板也不一样,使用<%= 变量 %>
的方式表示变量。
js代码
无需改动,和上面简洁语法版
是一样的。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>basic-demo</title> <script src="../../lib/template.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> {{/if}} {{$data}} </script> <script> var data = { title: \'基本例子\', isAdmin: true, list: [\'文艺\', \'博客\', \'摄影\', \'电影\', \'民谣\', \'旅行\', \'吉他\'] }; var html = template(\'test\', data); document.getElementById(\'content\').innerHTML = html; </script> </body> </html>
以上是关于JavaScript模板引擎实例应用的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Slim 模板中访问 CoffeeScript 引擎中的实例变量