在这里插入图片描述
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript" src="./template.js"></script>
<script type="text/html" id="resultTemplate">
<h1>{
{
title}}</h1>
<!-- books是data数据里面的字段名，并要求books里面的数据是数组格式 -->
{
{
each books as value i}}
<div>{
{
value}}</div>
{
{
/each}}
</script>
<script type="text/javascript">
window.onload = function () {
var data = {
title: '四大名著图书信息',
books: ['三国演义', '水浒传', '西游记', '红楼梦']
};
var html = template("resultTemplate", data);
var container = document.querySelector("#container");
container.innerHTML = html;
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
例子2
1.data自定义添加一个属性，模板种就能够使用新属性count
2.通过data中的isAdmin判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./template.js"></script>
<script id="test" type="text/html">
<!-- 通过data中的isAdmin判断 -->
{
{
if isAdmin}}
<h1>{
{
title}}</h1>
<h2>一共有{
{
count}}条数据</h2>
<ul>
{
{
each list as value i}}
<li>索引 {
{
i + 1}} ：{
{
value}}</li>
{
{
/each}}
</ul>
{
{
/if}}
{
{
if !isAdmin}}
<h1>没有任何数据</h1>
{
{
/if}}
</script>
<script>
window.onload = function () {
var data = {
title: '条件判断基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
data.count = data.list.length; //自定义添加一个属性，模板种就能够使用count
var html = template("test", data);
document.querySelector("#content").innerHTML = html;
}
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
例子3
1.有时候可能要对原始的数据进行更改
2. var data = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
3.这种情况下要新建新的对象，里面添加一个arr属性，并将data数据赋值
4.因为 模板中使用的字段一定是传递数据data中的属性，并要求里面的属性是数组类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./template.js"></script>
<!-- data.data -->
<script id="test" type="text/html">
<ul>
{
{
each arr as value i}}
<li>{
{
value}}</li>
{
{
/each}}
</ul>
</script>
<script>
window.onload = function () {
var data = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
var temp = {
};//新建新的对象
temp.arr = data; //里面添加一个arr属性，并将data数据赋值
var html = template("test", temp);//data.xxx 模板中使用的字段一定是传递数据data中的属性，并要求里面的属性是数组类型
document.querySelector("#content").innerHTML = html;
}
</script>
</head>
<body>
<div id="content">
<ul>
<li>文艺</li>
<li>博客</li>
</ul>
</div>
</body>
</html>
例子4
1.有可能data数据中的data是标签类型
2.通过{
{
#value}}进行转义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./template.js"></script>
<script id="test" type="text/html">
<p>转义：{
{
#value}}</p>
<p>默认转义： {
{
value}}</p>
</script>
<script>
window.onload = function () {
// 这里的数据当中包含特殊字符
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
