Art-Template模板引擎（原生写法与简洁写法）
模板引擎：把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>
