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 }}