模板引擎：把js数据转换成html需要的页面，这就是模板引擎需要做的事
• native原生语法
1. 准备数据
2. 把数据转化成html格式的字符串 使用模板引擎 artTemplate 原生语法
a. 下载原生语法的js文件
b. 引入在当前页面
c. 怎么使用？
i. 创建模板 ，在html页面创建<script type='text/template'></script>
1. Type必须是text/template或text/html
2. 写这个的目的是为了让内容不被解析成js执行，当做字符串或html去解释，不会显示在页面中
3. 给标签设置一个ID用来做标识
4. 模板的内容是什么？内容里面有没有特殊语法
5. 模板引擎是有自己的语法的，原生的语法
6. 可以在模板引擎内写，js语法 <% js语法 %>
7. 可以拿到数据 。传的对象的属性当做变量使用 {list：data} list是一个变量可以在模板引擎内使用
8. 获取数据显示出来 <%=属性名称 %>
9. 在模板引擎内不可使用全局变量。提高性能
10. 如果想使用全局变量怎么办？两种方式
11. 第一种：当做数据进行传递 {console：console}
12. 第二种：helper()
13. = 获取数据的时候，默认解析出的数据纯字符串
14. =# 符号获取数据的时候，默认解释出的是html代码在浏览器是会被执行的<script>alert(0);<\/script>
15. 可以导入 其他模板。Include（’childTemplate‘，{’name‘：’xx‘}）
ii. 把数据使用在模板中
iii. 有两个参数：模板的ID，数据（特殊要求：必须是对象）
iv. 返回的内容是什么？是数据转化成的html格式的字符串
v. 注册模板内部能使用的函数 var a=function(){ } {getConsole：function（）{ } }
vi. 两个参数，第一个参数：方法的名称。第二个参数：方法名对应的函数
3. 渲染
<script type="text/template" id="childTemplate">
<tr><td colspan="5"><%=name%>我是子模版</td></tr>
</script>
<script type="text/template" id="template">
<% include('childTemplate',{'name':'xgg'}); %>
<% var console = getConsole(); %>
<% console.log('我使用了全局变量'); %>
<% for(var i = 0 ; i < list.length ; i ++){ %>
<% var item = list[i]; %>
<tr>
<td><%=i+1%></td>
<td><%=item.username%></td>
<td><%=item.password%></td>
<td><%=item.age%></td>
<td><%=item.sex%></td>
</tr>
<% } %>
</script>
<script src="js/jquery.min.js"></script>
<script src="js/template-native.js"></script>
<script>
/*1.准备数据*/
var data = [
{"username":"<span style='color:red'>xgg1</span>","password":"123456","age":18,"sex":"男"},
{"username":"xgg2","password":"123456","age":18,"sex":"男"},
{"username":"xgg3","password":"123456","age":18,"sex":"男"}
];
/*2.把数据转化成html格式的字符串 使用模版引擎 artTemplate 原生语法 */
/*2.1 下载 https://github.com/aui/art-template */
/*2.2 引入在当前页面 template-native.js 原生语法的js文件*/
/*2.3 怎么使用模板引擎*/
/*2.3.1 创建模版 在html页面创建 <script type='text/template'><\/script> */
/*2.3.2 把数据使用在模版当中*/
/*2.3.3 有两个参数 第一个参数 模版的ID 第二个参数 数据（特殊要求：必须是对象{}）*/
/*2.3.4 返回的内容是什么 是html格式的字符串*/
/*2.3.5 注册模版内部能使用的函数 var a = function(){} ｛getConsole:function(){}｝*/
/*2.3.6 两个参数 第一个参数 方法的名称 第二个参数 方法名对应的函数 */
template.helper('getConsole',function(){
return console;
}); var html = template('template',{list:data});
/*3.渲染*/
$('tbody').html(html);
</script>
• pithy简洁语法
1、准备数据
2、把数据转化成html格式的字符串 使用模板引擎 artTemplate 简洁语法
i. 引入js文件
ii. 准备模板
iii. 调用解析方法
a. 简洁语法的模板 使用简洁语法
b. {{ 写简洁语法 }}
c. Each 需要遍历的数据 默认的 索引和索引对应的值 使用默认变量 $index $value
d. {{ each model as item i }} 自己指定 索引和对应数据的 变量名称
e. {{ if }}
f. 导入 {{ include 'childTemplate' }}
3、渲染
<!--
1.简洁语法的模版 使用简洁的语法
2.{{ 写简洁语法 }}
3. each 需要遍历的数据 默认的 索引和索引对应的数据 使用默认变量 $index $value
4. {{each model as item i }} 自己指定 索引和对应数据的 变量名称
5. {{if}}
6. 导入 {{ include 'childTemplate'}} 注意 最后的地方（}}）不能有空格
-->
<script type="text/template" id="childTemplate">
<tr><td colspan="5">我是子模版</td></tr>
</script>
<script type="text/template" id="template"> {{ include 'childTemplate'}} {{each model}}
<tr>
<td>{{$index+1}}</td>
<td>{{$value.username}}</td>
<td>{{$value.password}}</td>
<td>{{$value.age}}</td>
<td>{{$value.sex}}</td>
</tr>
{{/each}} {{each model as item i }}
<tr>
<td>{{if i == 2}} <b>0</b> {{/if}}</td>
<td>{{item.username}}</td>
<td>{{item.password}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
{{/each}}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/template.js"></script>
<script>
/*1.准备数据*/
var data = [
{"username":"xgg1","password":"123456","age":18,"sex":"男"},
{"username":"xgg2","password":"123456","age":18,"sex":"男"},
{"username":"xgg3","password":"123456","age":18,"sex":"男"}
];
/*2.把数据转化成html格式的字符串 使用模版引擎 artTemplate 简洁语法 */
/*2.1 引入js文件 template.js 简介语法的文件*/
/*2.2 准备模版 */
/*2.3 调用解析方法*/
var html = template('template',{model:data});
/*3.渲染*/
$('tbody').html(html);
</script>