1.下载模版引擎,导入模版文件
<script src="template-web.js"></script>
2. 准备模板, 指定 type = "text/x-template-web", 告诉浏览器当前这个模板, 不需要被解析执行
1 <script type="text/html" id="tpl"> 2 <p>姓名: {{ name }} </p> 3 <p>年龄: {{ age }}</p> 4 <p>性别: {{ sex }}</p> 5 <p>描述: {{ desc }}</p> 6 </script>
3.准备模版引擎的插入位置
<div id="user"> </div>
4.准备数据,也可以从后台通过 ajax 获取数据
var obj = {
name: "小王",
age: 18,
sex: 1, // 1 表示 男, 0 表示 女
desc: "猥琐"
};
5.将模板和数据相结合
// template( "模板id", 数据对象 ); 返回值是一个 html 字符串
// 在模板中可以使用数据对象的属性, 对象的属性都将成为模板中的变量
// 注意: 参数2必须是一个对象
var htmlStr = template( "tpl", obj );
// 将字符串模板渲染到 页面中
document.getElementById("user").innerHTML = htmlStr;
6.模板引擎-if语句
1 <div id="user"> 2 <p>姓名: xx</p> 3 <p>年龄: xx</p> 4 <p>性别: xx</p> 5 <p>描述: xx</p> 6 </div> 7 8 <!-- 使用模板引擎 --> 9 <!-- 1. 引包 --> 10 <script src="template-web.js"></script> 11 12 <!-- 2. 准备模板, 指定 type = "text/html", 告诉浏览器当前这个是 html 模板, 不需要被解析执行 --> 13 <script type="text/html" id="tpl"> 14 <p>姓名: {{ name }} </p> 15 <p>年龄: {{ age }}</p> 16 <p>性别: 17 {{ if sex === 1 }} 18 男 19 {{ /if }} 20 {{ if sex === 0 }} 21 女 22 {{ /if }} 23 24 {{ if sex === 1 }} 25 男 26 {{ else }} 27 女 28 {{ /if }} 29 30 31 {{ if sex === 1 }} 32 男 33 {{ else if sex === 0 }} 34 女 35 {{ else }} 36 未知 37 {{ /if }} 38 39 {{ sex === 1 ? "男" : "女" }} 40 41 </p> 42 <p>描述: {{ desc }}</p> 43 </script> 44 45 <script> 46 // 找对象 47 var user = document.getElementById("user"); 48 49 // 3. 准备数据 50 // 从后台通过 ajax 获取数据 51 var obj = { 52 name: "小王", 53 age: 18, 54 sex: 1, // 1 表示 男, 0 表示 女 55 desc: "猥琐" 56 }; 57 // 4. 将模板和数据相结合 58 // template( "模板id", 数据对象 ); 返回值是一个 html 字符串 59 // 在模板中可以使用数据对象的属性, 对象的属性都将成为模板中的变量 60 // 注意: 参数2必须是一个对象 61 var htmlStr = template( "tpl", obj ); 62 63 // 将字符串模板渲染到 页面中 64 user.innerHTML = htmlStr;
7.模板引擎-each语句
1 <div id="userlist"> 2 <p>xx</p> 3 <p>xx</p> 4 <p>xx</p> 5 <p>xx</p> 6 </div> 7 8 <!-- 使用模板引擎 --> 9 <!-- 1. 引包 --> 10 <script src="template-web.js"></script> 11 <!-- 2. 准备模板 --> 12 <!-- (1) each 语法中, 内置了 $index 和 $value, $index 表示索引, $value 表示每项的值 --> 13 14 <!-- (2) each 语法支持自定义, each list v i, v 表示每项的值, i 表示索引--> 15 <script type="text/html" id="tpl"> 16 17 {{ each list }} 18 <p>$value: {{ $value }}, $index: {{ $index }}</p> 19 {{ /each }} 20 21 {{ each list v i }} 22 <p>自定义的v: {{ v }}, 自定义的索引i: {{ i }}</p> 23 {{ /each }} 24 25 </script> 26 <script> 27 var userlist = document.getElementById("userlist"); 28 29 // 3. 准备数据 30 var arr = [ "张三", "李四", "王五", "赵六" ]; 31 32 // 4. 将模板和数据相结合 template( 模板id, 数据对象 ) 33 // 参数2, 必须是一个对象 34 // 将数组, 包装到一个对象中, 成为了对象的一个属性 35 var obj = { 36 list: arr 37 }; 38 39 // 在模板中, 可以使用传进来对象对象的属性 40 var htmlStr = template( "tpl", {list:arr} ); 41 42 userlist.innerHTML = htmlStr; 43 44 </script>
8.注意事项
使用 data-id='{id}' 给目标位置设置id , 获取的时候,发现该模版引擎不支持 $('选择器').data('id'); 的方式获取,支持 $('选择器').attr('data-id'); 获取
9.原生方式使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="./artTemplate/template-native.js"></script> 7 </head> 8 <body> 9 <div id="user"> </div> 10 </body> 11 12 <script type="text/html" id="tpl"> 13 <% if(list && list.length){ %> 14 <% for(var i = 0 ; i < list.length ; i ++){ %> 15 <p>姓名: <%= list[i].name %> </p> 16 <p>年龄: <%= list[i].age%></p> 17 <p>描述: <%= list[i].desc %></p> 18 <p>性别: <%= list[i].sex %></p> 19 <%}%> 20 <%}%> 21 </script> 22 <script> 23 var arr =[ 24 { 25 name: "小王", 26 age: 18, 27 sex: 1, // 1 表示 男, 0 表示 女 28 desc: "猥琐" 29 }, 30 { 31 name: "小ming", 32 age: 28, 33 sex: 0, // 1 表示 男, 0 表示 女 34 desc: "搞笑" 35 }] 36 var htmlStr = template( "tpl", {list:arr}); 37 console.log(htmlStr) 38 39 document.getElementById("user").innerHTML = htmlStr; 40 41 </script> 42 </html>
10.模版引擎内部使用Jquery插件
js代码
1 /*模板无法访问外部变量的解决方案*/ 2 /*var getJquery = function () { 3 return jQuery; 4 }*/ 5 //上下两个方法意思一样 但是上面方法是外部 模版内部用不了 6 /*模版的辅助方法：在模板内部可以使用的函数*/ 7 template.helper('getJquery',function () { 8 return jQuery; 9 });
模版代码
1 <% var $ = getJquery(); %> 2 <% $.each(arr,function(i,item){ %> 3 4 <% }); %>
11.子模版和模板继承
1) 创建公共模版的代码header.html和footer.html(代码类似)
<div> <h1>公共的头部</h1> </div>
2)引入公共代码，创建公共模版layout.html，并留填坑位置和填坑标记
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css"> 7 {{ block 'head' }}{{ /block }} 8 </head> 9 <body> 10 {{ include './header.html' }} 11 <!-- 留一个坑，将要留给孩子去填坑 --> 12 <!-- 不填就是用默认内容 --> 13 {{ block 'content' }} 14 <h1>默认内容</h1> 15 {{ /block }} 16 17 {{ include './footer.html' }} 18 <script src="/jquery/dist/jquery.js"></script> 19 <script src="/bootstrap/dist/js/bootstrap.js"></script> 20 {{ block 'script' }}{{ /block }} 21 </body> 22 </html>
3)继承公共模版，并填坑
1 {{extend './layout.html'}} 2 3 {{ block 'head' }} 4 <style> 5 body { 6 background-color: skyblue; 7 } 8 </style> 9 {{ /block }} 10 11 {{ block 'content' }} 12 <div> 13 <h1>index 页面填坑内容</h1> 14 15 </div> 16 {{ /block }} 17 18 {{ block 'script' }} 19 <script> 20 window.alert('index 页面自己的 js 脚本') 21 </script> 22 {{ /block }}