一.介绍
1.作用
template.js 一款javascript模板引擎，简单，好用。
提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。
2.特性：
模版编译，渲染
支持所有主流浏览器及Node（UMD）
JavaScript原生语法
丰富的自定义配置
支持数据过滤
异常捕获功能
功能专一，简单好用
二.基本使用
1.页面中引入
<ul></ul>
<script src="jquery.js"></script>
<script src="template.js"></script>
2.使用一个type="text/html"的script标签存放模板，或者放到字符串中：
<script type='html/text' id='tmp'>
<li>{{name}}</li>
</script>
3.渲染模板
var obj = {
name: '么么哒'
}
var html = template('tmp', obj)
console.log(html)
$('ul').html(html)
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../01/jquery.js"></script>
<script src="../01/template.js"></script>
</head>
<body>
<ul></ul>
<script type='html/text' id='tmp'>
<li>{{name}}</li>
</script>
<script>
var obj = {
name: '么么哒'
}
var html = template('tmp', obj)
$('ul').html(html)
</script>
</body>
</html>
三.遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../01/jquery.js"></script>
<script src="../01/template.js"></script>
</head>
<body>
<ul></ul>
<script type='text/html' id='tmp'>
{{each arr item index}}
<li>索引:{{index}}-----{{item}}</li>
{{/each}}
</script>
<script>
var arr = [10, 20, 30]
var obj = {
arr: arr,
name: 'zhangsan'
}
var html = template('tmp', obj)
//console.log(html)
$('ul').html(html)
</script>
</body>
</html>
四.双重循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.js"></script>
<script src="./template.js"></script>
</head>
<body>
<div></div>
<script type='html/text' id="tmp">
{{each list val key}}
<h4>索引:{{key}}------- {{val.title}}</h4>
<ul>
{{each val.tags }}
<li>{{$index}}-----{{$value}}</li>
<!-- $index,$value 只能叫这个名字 -->
{{/each}}
</ul>
{{/each}}
</script>
<script>
window.onload = function () {
var data = {
list: [{
title: 'xxx1',
tags: ['文艺1', '博客1', '摄影1', '电影1']
},
{
title: 'xxx2',
tags: ['文艺2', '博客2', '摄影2', '电影2']
}]
}
var htmls = template("tmp", data)
console.log(htmls)
$('div').html(htmls)
}
</script>
</body>
</html>
五.交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../01/jquery.js"></script>
<script src="../01/template.js"></script>
</head>
<body>
<input type="text" placeholder="请输入关键字" id='inputs'>
<button id='btn'>点击搜索</button>
<ul></ul>
<script type="text/html" id="tmp">
{{each s item index}}
<li>索引:{{index}}-----{{item}}</li>
{{/each}}
</script>
<script type="text/javascript">
$("#btn").click(function(){
var val = $("#inputs").val()
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data: {
wd: val // wd 只能叫这个名字 因为百度叫这个
},
dataType: 'jsonp',
jsonp: 'cb', //jsonp 只能cb 因为百度叫这个
success:function(res){
console.log(res);
var htmls = template('tmp', res)
$('ul').html(htmls)
}
})
})
</script>
</body>
</html>
版权声明：本文为kgcwuli原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。