模板引擎art-template
1.使用流程(三步走)
1.1.导入模板引擎art-template.js文件;
<script src="./libs/template-web.js"></script>
2.写HTML模板
<script id='tpl' type="text/html"></script>(这个script标签内的模板就是和html文档内标签一致)
模板写到script标签中
必须要设置id
必须要设置type(一般为 type="text/html")
3.调用art-template的官方API开始解析模板
var htmlStr = template('tpl', jsonObjc.data);
第一个参数:你的模板id名
第二个参数:你想要解析的js对象
返回值:解析数据之后的HTML字符串
1.2-模板引擎语法介绍
<!-- 语法不用刻意的死记硬背，忘记了随时查阅官方文档 -->
<!-- 1.标准语法：对象的取值操作 -->
<p>{{ city }}</p>
<p>{{ ganmao }}</p>
<p>{{ wendu }}</p>
<!-- 2.循环语法 $index:下标 $value:数组中每一个元素 -->
<ul>
{{ each forecast }}
<li>
<span>{{ $index }}</span>--
<span>{{ $value.date }}</span>--
<span>{{ $value.high }}</span>--
<span>{{ $value.low }}</span>--
<span>{{ $value.type }}</span>
</li>
{{ /each}}
</ul>
<!-- 3.分支语法:满足条件就渲染 -->
{{ if wendu >= 25 }}
<p>今天好热啊,才{{ wendu }}度</p>
{{ else }}
<p>今天好凉快啊,才{{ wendu }}度</p>
{{ /if }}
1.3-模板引擎易错点总结
!--模板引擎易错点总结
1.导入js文件
* a.文件路径写错
2.写模板
* a. script标签的id没有设置
* b. script标签的type属性写错
* 一般设置为 text/html
* 不能不写，也不能是 text/javascript，否则浏览器会以为这是js代码来解析
* c. 模板语法写错
* 只要模板语法写错，浏览器就会报错（这是一个固定格式的报错提示,会告诉你出错的位置）
* d. 模板中对象属性名写错，浏览器不会报错但是数据无法渲染
3.调用api解析渲染模板
* 参数传错（第一个是模板script标签的id，第二个是要解析的数据js对象）
4.将解析好的模板显示到页面
模板引擎的注意
1.模板引擎渲染的数据对象既可以是服务器返回，也可以自己写
2.模板引擎可以写js的方法。 str.indexOf str.split() 只要语法没有写错就可以解析
3.模板引擎的本质是字符串替换
4.模板引擎渲染之后，并不是所有的功能都需要替换，也可以是添加
