doT.js模板引擎
我总结的特点是:简单易用、速度快、不依赖其他库,连玩带学只需20分钟即能学会。当然功能肯定会有限制。
下载地址
http://jinlong.github.io/doT/
教程参看
http://blog.csdn.net/chuyuqing/article/details/46795457
http://www.51xuediannao.com/js/texiao/dot.html
http://www.tuicool.com/articles/QBBZFn
上较为复杂的代码:
<!-- 定义模板 -->
<script id="nameTemp" type="text/x-dot-template">
姓名:{{=it.name}}
</script>
<!-- 显示数据的位置 -->
<div id="name"></div><hr />
<!-- 定义模板 -->
<script id="titleTemp" type="text/x-dot-template">
{{~it.article:value:index}}
<p>{{= index+1 }}.{{= value.title }} 赞:
{{~value.like:value2}}
{{= value2.name }}
{{~}}
</p>
{{~}}
</script>
<!-- 显示数据的位置 -->
<div id="title"></div><hr /> it表示当前数据
//定义数据
var interationData =
{
"name":"小明",
"age":20,
"article":
[
{
"id":"1",
"title":"学习apicloud",
"content":"alskdjf",
"like":
[
{
'id':'1111',
'name':'伽利略'
},
{
'id':'222',
'name':'哥白尼'
}
]
},
{
"id":"2",
"title":"学习js",
"content":"alskdjf",
"like":[]
},
{
"id":"3",
"title":"html",
"content":"alskdjf",
"like":[]
}
]
};
//编译模板
var interation = doT.template( $('#nameTemp').html() );
//将数据显示到网页中
$( '#name' ).html(interation( interationData ));
//编译模板
var interation = doT.template( $('#titleTemp').html() );
//将数据显示到网页中
$( '#title' ).html(interation( interationData ));for语句嵌套if else if语句判断
{{~it:value:index}}
{{? value.status=== 1}}已发布
{{?? value.status === -10}}已发布
{{?? value.status === -20}}草稿
{{?? value.status === -30}}被拒绝
{{?}}
{{~}}代码下载:http://pan.baidu.com/s/1qXGFrPy
for语句嵌套if、else if、else语句判断
{{~it:value:index}}
{{? value.status=== 1}}已发布
{{?? value.status === -10}}已发布
{{?? value.status === -20}}草稿
{{?? value.status === -30}}被拒绝
{{?? }}其他
{{?}}
{{~}}