art-template模板引擎、ajax

art-template模板引擎使用运用

模板引擎概念，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面。

优势：减少了字符串的拼接操作、使代码结构更清晰、使代码更易于阅读与维护

安装

1：浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html
2：找到 安装 导航栏，找到下载链接，右键下载即可

 

基本使用

art-template使用步骤 

1： 引入template模板引擎文件
2： 定义数据
3： 定义模板
4 ：定义模板
5：渲染html结构

<!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8   <title>Document</title>
 9   <!-- 1 引入template文件 -->
10   <script src="./lib/template-web.js"></script>
11   <script src="./lib/jquery.js"></script>
12 </head>
13 
14 <body>
15   <div class="box"></div>
16   <!-- 3 定义模板 -->
17   <!-- 3.1 模板的html必须定义到script标签中，叫做teplate('模板id'，需要渲染的数据对象) -->
18   <!-- 3.2 给模板添加一个id -->
19   <!-- 3.3 模板里面如果需要使用到传入的数据，利用{{}}实现 
20   例如：{{name}}，那么就会去找 我们调用 template() 函数 第二个参数里面对应的name属性的值 -->
21   <!--{{}}  占位符  -->
22   <script type="text/html" id="temp">
23   <h2>{{uname}}------{{age}}</h2>
31   </script>
32   <script>
33     // 2 定义数据 对象数据类型
34    var data = { uname: '张三', age: 20}
36     // 4 调用template函数 template('模板id',需要渲染的数据对象)
37     var templateStr = template('temp', data)
38     console.log(templateStr);
39     // 5 渲染html数据 最后我们需要把template返回的模板字符串设置到页面容器中
40     $('.box').html(templateStr)
41   </script>
42 </body>
43 
44 </html>

标准语法

标准语法概念： 在 {{}} 内可以进行 变量输出 或 循环数组 等操作，这种 {{}} 语法在 art-template 中被称为标准语法

输出：在 {{}} 语法中，可以进行 变量 的输出，对象属性的输出，三元表达式输出，逻辑或输出，加减乘除等表达式输出

 

1： 原文输出  {{@ value}}

注意：输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染

2：条件输出  在 {{}} 中使用 if...else if.../if 的方式，进行按需输出

 

3： 循环输出

在{{}} 内，通过 each 语法循环数组 当前循环的索引使用 $index 进行访问，当前循环项使用 $value 进行访问

 

  4:过滤器

  过滤器语法类似于 管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法：

 示列如下:（请看一、二、三、四标注的示列）　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>Document</title>
 9     <!-- 1 引入template模板引擎文件 -->
10     <script src="../day02/lib/template-web.js"></script>
11     <script src="../day02/lib/jquery.js"></script>
12 </head>
13 
14 <body>
15     <div id="container"></div>
16     <!-- 3 定义模板 -->
17     <!-- 3.1 模板的html结构，必须定义到sript中 -->
18     <script type="text/html" id="tpl_user">
19      <h1>{{name}}----{{age}}</h1>
20     <!-- 一、原文输出 -->
21      <div>{{@ test }}</div>
22     <!-- 三、选好输出 each -->
23      <ul>
24          {{each hobby}}
25          <li>索引是：{{$index }},当前循环项是：{{$value}}</li>
26          {{/each}}
27      </ul>
28     <!-- 二、if 条件输出 -->
29     <div>
30         {{if flag===0}}
31         flag的值是0
32         {{else if flag===1}}
33         flag的值是1
34         {{/if}}
35     </div>
36     <!-- 四、过滤器 -->
37     <!-- 四（3）管道操作符  在模板引擎中使用过滤器-->
38     <!-- newTiem 服务器返回的日期， filterName日期格式化 -->
39     <h3>{{newTime | filterName}}</h3>
40     </script>
41     <script>
42         // 四(2) 定义处理时间的过滤器
43        //形参date，由实参newTime 传递过来
44         template.defaults.imports.filterName = function (date) {
45             // console.log(date);
46             // 年
47             var y = date.getFullYear()
48             y = y < 10 ? '0' + y : y;
49             // 月
50             var m = date.getMonth() + 1;
51             m = m < 10 ? '0' + m : m;
52             // 日
53             var d = date.getDate()
54             d = d < 10 ? '0' + d : d;
55             // 时
56             var hh = date.getHours()
57              hh = hh < 10 ? '0' + hh : hh;
58             // 分
59             var mm = date.getMinutes()
60               mm = mm < 10 ? '0' + mm : mm
61             // 秒
62             var ss = date.getSeconds()
63              ss = ss < 10 ? '0' + ss : ss
64              // 星期
65             var arr=['星期日', '星期一', '星期二','星期三', '星期四', '星期五', '星期六',]
66             var day = date.getDay();
67 
68             return `${y}-${m}-${d} ${hh}:${mm}:${ss} ${arr[day]}`
69         }
70         // 2 定义数据
71         // 四(1) 定义数据newTime: new Date()
72         var data = {
73             name: 'zs', age: 30, test: '<h3>原文输出<h3>', hobby: ['吃饭', '睡觉', '打豆豆'],
74             flag: 1, newTime: new Date()
75         }
76         // 4 调用template函数
77         var htmlStr = template('tpl_user', data)
78         console.log(htmlStr);
79         // 5 渲染html结构
80         $('#container').html(htmlStr)
81 
82     </script>
83 </body>
84 
85 </html>

 

　

 

posted @ 2021-10-18 20:24  原来是奔跑的蜗牛  阅读(195)  评论(0)    收藏  举报