artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。
可以使用
arttemplate.js 简洁语法版
arttemplate-native.js 原生语法版(支持js语法)
本篇先介绍 简洁语法 版的基本使用
1.下载并引入js文件
<script src="./template.js"></script>
2.定义一段HTML代码作为接收模板的盒子
<!-- 接收模板的盒子 -->
<div id="box"></div>
3.定义一个渲染模板
//注意 <script>的type属性可以随意设置,除了 type="text/javascript",目的是为了不让他像普通js代码一样被编译
<script type="text/html" id="abc">
<h1>{{title}}</h1>
<ul>
{{ each arr as value key }}
<li>{{value}}</li>
{{/each}}
</ul>
<ol>
{{each json as value key}}
<li> {{value}} </li>
{{/each}}
</ol>
</script>
4.将数据和模板关联
arttemplate模板内置一个叫做template()方法,接收两个参数,使用方式:template(“模板id”, 要渲染的数据);,它的返回值可以简单的认为是一段html代码,
window.onload = function() {
var data = {
title: "Welcome To ArtTemplate",
arr: ["a", "b", "c", "d", "e"],
json: {
a: 'aaa',
b: 'bbb',
c: 'ccc',
d: 'ddd'
}
}
//获取接收模板盒子的元素
var box = document.getElementById("box");
//关联数据
// 自带的template(模板, 数据),返回值是一段html
var strhtml = template("abc", data);
//将元素的innerHTML 设为template方法返回的strhtml
box.innerHTML = strhtml;
}
结果如图
遍历json数据
1.html代码相同,不做赘述
2.定义模板
<script type="text/html" id="tpl">
<ul>
{{each json as value key}}
<li> {{value}} === {{key}} </li>
{{/each}}
</ul>
</script>
3.关联数据和模板
<script>
window.onload = function() {
var data = {
json: {
a: 'aaa',
b: 'bbb',
c: 'ccc',
d: 'ddd'
}
}
var strhtml = template("tpl", data);
var box = document.getElementById("box");
box.innerHTML = strhtml;
模板内包含模板 include()
1.html代码相同,不做赘述
2.定义模板1和模板2
//模板1
<script type="text/html" id="tpl1">
{{title}} {{ include "tpl2" }}
</script>
//模板2
<script type="text/html" id="tpl2">
<ul>
{{ each json as value key }}
<li>{{key}}--->{{ value }}</li>
{{/each}}
</ul>
</script>
3.渲染模板&关联数据
<script>
window.onload = function() {
var data = {
title: "Welcome To ArtTemplate",
arr: ["a", "b", "c", "d", "e"],
json: {
a: 'aaa',
b: 'bbb',
c: 'ccc',
d: 'ddd'
}
}
var box = document.getElementById("box");
var strhtml = template("tpl1", data);
box.innerHTML = strhtml;
}
</script>