- 科技
- artTemplate模版引擎的简洁语法的基本用法
artTemplate开源社区 中文说明文档
基本引用和循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引擎模版使用
</title>
<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
window.onload = function(){
var data ={
title : '小孩信息',
stu : ["小红",'小星','无名','媛媛']
}
var html = template('templt',data);
document.getElementById("box").innerHTML =html;
}
</script>
<script type="text/html" id="templt">
<!-- type格式: text/html ; id名自取 -->
<!-- {{varName}} :中存放数据 -->
<h1>{{title}}</h1>
<!-- 循环判断：判断stu是否存在
使用each循环
-->
{{if stu}}
{{each stu as value i}}
<div>{{value}}</div>
{{/each}}
{{/if}}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
示例代码（转义与不转义）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引擎模版使用
</title>
<script type="text/javascript" src="template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} : {{value}}</li>
{{/each}}
</ul>
{{/if}}
<p>不转义：{{#strs}}</p>
<p>默认转义：{{strs}}</p>
</script>
<script>
var data ={
title:'基本例子',
isAdmin:true,
list:["文艺","摄影","博客","电影"]
}
var html = template('test',data);
var desc = {
strs: "<span style='color:#F00'>hello world!</span>"
}
document.getElementById("content").innerHTML =html+template('test',desc);
</script>
</body>
</html>
在js中存入模版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引擎模版使用
</title>
<script type="text/javascript" src="template.js"></script>
</head>
<body>
<h1>在JavaScript中存放模版
</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html =render({
list:["文艺","摄影","博客","电影"]
});
document.getElementById("content").innerHTML =html;
</script>
</body>
</html>
嵌入子模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引擎模版使用
</title>
<script type="text/javascript" src="template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1> {{include 'child'}}
</script>
<script type="text/html" id="child">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} : {{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list:["文艺","摄影","博客","电影"]
}
document.getElementById("content").innerHTML = template('test',data);
</script>
</body>
</html>
Processed:
0.010, SQL:
8
