模板引擎art-template
郑向阳
模板引擎art-template
使用流程（4步）
- 导入模板引擎art- template.js文件
<script src="./libs/template-web.js"></script>
- 写HTML模板
（1）模板写到哦script标签中
（2）必须设置id
（3）必须要设置type（一般为type=“text/html”）
<script id='tpl' type="text/html"></script>
- 调用art-template的官方API开始解析模板
（1）第一个参数：你的模板id名
（2）第二个参数：你想要解析的js对象
（3）返回值：解析数据之后的HTML字符串
let htmlStr = template('tpl', jsonObjc.data);
- 将解析好的模板显示到页面
document.body.innerHTML = htmlStr;
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h2>天气查查查--</h2>
<input type="text" placeholder="请输入查询的城市" class="search" />
<p class="suggest"></p>
<ul class="weather"></ul>
</body>
</html>
<script src="jquery-1.12.4.js"></script>
<!-- 1.导包 -->
<script src="template-web.js"></script>
<!-- 2.写模板 天气列表模板-->
<script id="weather_list" type="text/html">
{{ each data.forecast }}
<li>
<span>{{ $value.date }}</span>--
<span>{{ $value.high }}</span>--
<span>{{ $value.low }}</span>--
<span>{{ $value.type }}</span>
</li>
{{ /each}}
</script>
<script>
/*
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city
示例： http://wthrcdn.etouch.cn/weather_mini?city=深圳
步骤：
1. 文本框按下事件： enter键 keyCode=13
2. 获取文本框的内容
3. ajax获取数据
4. 数据返回之后渲染到页面
*/
$(function () {
// 1.给输入框注册键盘按下(监听enter键)
$('.search').keydown(function (e) {
if (e.keyCode != 13) return;
// 2.获取输入的文本
let searchCity = $(this).val();
// 3.ajax发送请求
$.ajax({
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
data: {
city: searchCity
},
dataType: 'json',
success: function (backData) {
console.log(backData);
// 4.数据响应之后渲染页面
// 4.1ganmao信息
$('.suggest').text(backData.data.ganmao);
// 4.2遍历backData.forecast生成li元素
// 先清除上一次的数据
// $('.weather').empty();
// let htmlStr = template('weather_list', backData);
// $('.weather').html(htmlStr);
$('weather').html( template('weather_list', backData))
}
});
});
});
</script>
模板引擎语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./libs/template-web.js"></script>
</head>
<body>
<!-- 2.写模板 -->
<script id="weather_list" type="text/html">
<!-- 模板语法 -->
<!-- (1)输出 : 支持对象取值，数组取值，算术运算，逻辑运算，三元运算 -->
<!-- 第一种写法：大胡子mustache语法 -->
<p> {{ data.ganmao }} </p>
<!-- 第二种写法：标准语法 -->
<p> <%= data.ganmao %></p>
<p> {{ data.forecast[0].date }} </p>
<p> {{ data.wendu + 1 }}</p>
<p> {{ +data.wendu + 1 }}</p>
<p> {{ data.wendu > 25 ? '好热':'好冷' }}</p>
<!-- (2)条件分支 -->
{{ if data.wendu > 30 }}
<p>如果条件成立，我才会渲染</p>
<p>如果条件不成立，我就渲染</p>
{{ /if }}
<!-- (3)循环遍历 -->
{{ each data.forecast }}
<li>
<span>数组下标： {{ $index }}</span>
<span>数组元素： {{ $value }}</span>
</li>
{{ /each }}
</script>
<script>
let jsonObj = '{"data":{"yesterday":{"date":"20日星期四","high":"高温 32℃","fx":"东南风","low":"低温 26℃","fl":"<![CDATA[2级]]>","type":"阴"},"city":"深圳","forecast":[{"date":"21日星期五","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"东南风","type":"多云"},{"date":"22日星期六","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"南风","type":"雷阵雨"},{"date":"23日星期天","high":"高温 32℃","fengli":"<![CDATA[2级]]>","low":"低温 26℃","fengxiang":"南风","type":"雷阵雨"},{"date":"24日星期一","high":"高温 32℃","fengli":"<![CDATA[3级]]>","low":"低温 27℃","fengxiang":"南风","type":"雷阵雨"},{"date":"25日星期二","high":"高温 31℃","fengli":"<![CDATA[3级]]>","low":"低温 26℃","fengxiang":"西南风","type":"雷阵雨"}],"ganmao":"感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。","wendu":"29"},"status":1000,"desc":"OK"}';
let backData = JSON.parse(jsonObj);
console.log(backData);
//3.调用官方API
let htmlStr = template('weather_list',backData);
//4.渲染解析好的模板
document.body.innerHTML += htmlStr;
</script>
</body>
</html>
模板引擎易错点
导入js文件- a.文件路径写错
写模板
（1） script标签的id没有设置
（2） script标签的type属性写错- 一般设置为 text/html
- 不能不写，也不能是 text/javascript，否则浏览器会以为这是js代码来解析
c. 模板语法写错 - 只要模板语法写错，浏览器就会报错（这是一个固定格式的报错提示,会告诉你出错的位置）
d. 模板中对象属性名写错，浏览器不会报错但是数据无法渲染
调用api解析渲染模板
参数传错（第一个是模板script标签的id，第二个是要解析的数据js对象）将解析好的模板显示到页面
类似资料：