art-template
javascript 模板引擎
分为原生语法和简洁语法，本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、编写HTML模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
三、向模板插入数据，并输出到页面
var data = {
title:"hello world"
};
var html = template("test",data);
document.getElementById(‘content‘).innerHTML = html;
输出HTML
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出
<script id="test" type="text/html">
<h1>{{#title}}</h1>
</script>
var data = {
title:"<p>hello world</p>"
};
var html = template("test",data);
document.getElementById(‘content‘).innerHTML = html;
流程控制语句（if else）
{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧
<script id="test" type="text/html">
<div>
{{if bok==22}}
<h1>线上</h1>
{{else if bok==33}}
<h2>隐藏</h2>
{{else}}
<h3>走这里</h3>
{{/if}}
</div>
</script>
<script>
var data = {
"bok":22
};
var html = template(‘test‘,data);
document.getElementById("app").innerHTML = html;
</script>
嵌套的写法
<script id="test" type="text/html">
<div>
{{if bok}}
{{if list.length>=0}}
{{each list}}
<p>{{$index}}:{{$value}}</p>
{{/each}}
{{else}}
<p>没有数据</p>
{{/if}}
{{/if}}
</div>
</script>
<script>
var data = {
"bok":true,
list:["a","b","c"]
};
var html = template(‘test‘,data);
document.getElementById("app").innerHTML = html;
</script>
循环遍历语句
{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}
<script id="test" type="text/html">
<div>
<ul>
{{if c==100}}
<ul>
{{each person}}
<li>
编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}
</li>
{{/each}}
</ul>
{{/if}}
</ul>
</div>
</script>
<script>
var data = {
c:100,
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
]
};
var html = template("test",data);
document.getElementById("content").innerHTML = html;
</script>
调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用
<script id="test" type="text/html">
<div>
{{if c==100}}
<ul>
{{each person}}
<li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>
{{/each}}
</ul>
{{/if}}
</div>
</script>
<script>
var data = {
c:100,
person:[
{name:"jack",age:18,sex:1},
{name:"tom",age:19,sex:0},
{name:"jerry",age:20,sex:0},
{name:"kid",age:21,sex:1},
{name:"jade",age:22,sex:0}
]
};
//自定义函数
template.helper("show",function(sex){
console.log(sex);//同样可以打印日志到控制台
if(sex==0){
return "男"
}else if(sex==1){
return "女"
}
});
var html = template("test",data);
document.getElementById("app").innerHTML = html;
</script>
调用子模板
{{include ‘main‘}} 引入子模板，数据默认为共享
{{include ‘main‘ a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的
<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</script>
<script id="test" type="text/html">
<div>
<ul>
{{each person}}
<li>{{$value.name}}</li>
{{/each}}
</ul>
{{include ‘main‘ a}}
</div>
</script>
<script>
var data = {
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
],
a:{
list:[‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
}
};
var html = template("test",data);
document.getElementById("app").innerHTML=html;
</script>
</body>
时间： 2024-10-06 18:49:20