现在有许多javascript模板引擎和服务器端的freemarker那些很像,定义模板像下面:
<textarea id="template" style="display:none">
<strong>{$T.name} : {$T.list_id}</strong>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</textarea>
感觉对html改动较大,pure就不一样了,对美工做的html影响很小。看下面一个例子:
<html>
<head>
<title>PURE Unobtrusive Rendering Engine</title>
<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
<style>
.even td { background : #DDD }
.odd td { background : #FFF }
</style>
</head>
<body>
<div style="width:100%; height: 288px; overflow: auto;">
<!-- HTML 模板 -->
<table id="mytb1" class="rc_bk" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="$(this).addClass('highlight');" onmouseout="$(this).removeClass('highlight');">
<td width="25%" class="rownum rightborder"></td>
<td width="25%" class="company rightborder"></td>
<td width="25%" class="amount rightborder"></td>
<td width="25%" class="increment"></td>
</tr>
</table>
</div>
<script>
// the JSON data we want to render
var data = {"rows":[{"company":'adobe',"increment":1552,"amount":14810},{"company":'google',"increment":-541,"amount":7470},{"company":'bea',"increment":865,"amount":6700},{"company":'red',"increment":756,"amount":6643},{"company":'abc',"increment":180,"amount":6239},{"company":'jboss',"increment":609,"amount":6219},{"company":'中华',"increment":-1116,"amount":6036},{"company":'no',"increment":95,"amount":5593},{"company":'sun',"increment":-143,"amount":4660},{"company":'test',"increment":-357,"amount":4541},{"company":'oracle',"increment":-181,"amount":4327},{"company":'dark',"increment":-393,"amount":3252},{"company":'ibm',"increment":-567,"amount":3147}]};
var directive = {
'tr' : { //trigger a loop
'row<-rows' : { // loop on the property animals in the JSON
'td.rownum': function(arg){if(arg.pos == arg.row.items.length - 1) return ''; return arg.pos + 1;},
'td.company': '#{row.company}',
'td.amount': '#{row.amount}',
'td.increment': '#{row.increment}',
'@class+':function(arg){ // add(+) the return value of the function to the class
return (arg.pos % 2 == 0) ? ' even' : ' odd';
}
}
}
};
// run the rendering
$('#mytb1').render( data, directive );
</script>
</body>
</html>
可以不刷新页面把ajax请求的数据多次render同一个模板。
开源项目,功能完善,示例丰富,把事情变简单了。
分享到:
相关推荐
Tempos高效的Javascript模板引擎
Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,效率和易用是它追求的目标。 除此之外,它还可以运行在 Node.js 环境中。 示例模板: {@each list as item,index} {@if index===3} the index is 3, the ...
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统js引擎的几乎所有功能。所有的变身魔法都由不到2KB的代码创造,laytpl视图用最轻量的...
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
PowJS -- 基于 DOM Tree 的 JavaScript 模板引擎
laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又...
DustJS 是一个支持浏览器和 Node.js 的异步模板引擎。特点:async/streaming operationbrowser/node compatibilityextended Mustache/ctemplate syntaxclean, low-level APIhigh performancecomposable templates ...
ECT是一个新兴的JavaScript模板引擎,主要致力于性能表现。 ECT开发者称,与其他引擎(如Dust、Hogan.js、Fest、Handlebars.js、doT、Swig、Eco、EJS、CoffeeKup和Jade等)相比,ECT目前是最快的,见基准测试。你...
Velocity.js 是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎,广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含 基本数据类型、变量赋值和...
laytpl-JavaScript模板引擎 v1.1.zip
arttemplate高性能javascript模板引擎.docx
JavaScript模板引擎原理与用法详解.docx
template.js的webpakc编译loader——一款javascript模板引擎
template.js的fis编译插件——一款javascript模板引擎
Surge.js 是新的示例,更快的 Javascript 模板引擎,语法跟 Liquid 和 Django template一样 。Surge.js 会解析 Html 模板中的 JavaScript 函数,编译的函数会被缓存。教程速度测试 V8 Javascript engine 的测试...
Nunjucks 是一个更复杂的 JavaScript 模板引擎,提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。示例代码:{% extends "base.html" %} {% block header %} <h1>{{ title }} {% endblock %...
laytpl-JavaScript模板引擎 v1.1-源码.zip
consolidate.js是一款javascript 模板引擎整合库.支持现今流行的多种模板引擎. 标签:consolidate
artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎...