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>
上一篇:修改ECSHOP,支持图片云存储化(分离到专用图片服务器)


下一篇:python基础之logging