template-web.js模板引擎的使用之高階篇
阿新 • • 發佈：2019-01-05
對於 template-web.js模板引擎還不瞭解的，建議學習上一篇， template-web.js模板引擎的初級使用。
本文將介紹template-web.js模板引擎的三個使用api 【1.邏輯語句if...else... 2.原文輸出 3.迴圈語句each】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div下一篇將介紹文web端另一個模板引擎Handlerbars的使用，敬請期待{ border: red1px solid; margin-top: 10px; } </style> </head> <body> <div id="ifBox"></div> <div id="norBox"></div> <div id="eachBox"></div> <!-- 引入模板引擎:一般用於在網路請求之後，展示相同的多條資料 --> <script type="text/javascript" src="js/template-web.js" ></script> <!-- 1.邏輯語句---條件語句的使用 --> <script type="text/html" id="ifPersonTemplate"> <ul> {{if sex=="女"}} <li>姓名:{{name}} 女士 <ol> <li>最新款的包包</li> <li>你真{{skill}}</li> </ol></li> {{else if sex=="男"}} <li>姓名:{{name}} 先生 <ol> <li>最新款的西裝</li> <li>你真{{skill}}</li> </ol> </li> {{/if}} </ul> </script> <script type="text/javascript"> //定義資料 var person1 = { name:"趙麗穎", sex:"女", skill:"可愛" }; var person2 = { name:"胡歌", sex:"男", skill:"帥氣" }; /** * 利用模板引擎 引用資料填充到模板中 * * 引數一：模板id * 引數二：資料 */ var result = template("ifPersonTemplate",person1); var result2 = template("ifPersonTemplate",person2); //將返回的模板結果新增到介面中 var ifBox = document.getElementById("ifBox"); ifBox.innerHTML = result + result2; </script> <!-- 2.原文輸出 --> <script type="text/html" id="norTemplate"> <ul> <li>{{name}}</li> <li>{{skill}}</li> <li>{{@info}}</li> </ul> </script> <script type="text/javascript"> var data = { name:"漩渦鳴人", skill:"多重影分身", info:"<a href='https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin'>個人資訊</a>" }; var result = template("norTemplate",data); var norBox = document.getElementById("norBox"); norBox.innerHTML = result; </script> <!-- 3.迴圈語句 --> <script type="text/html" id="eachTemplate"> <ul> <li>組織: {{key}}}</li> <li>組員: {{each person}} <ol> {{$index}}{{$value}} </ol> {{/each}} </li> <li>組員資訊: {{each info}} <ol>{{$value.name}} --- {{$value.age}} </ol> {{/each}} </li> </ul> </script> <script type="text/javascript"> var family = { key:"APP開飯糰隊", person:[ "劉強", "黃衝", "熊斌" ], info:[ {name:"劉強",age:23}, {name:"黃衝",age:26}, {name:"熊斌",age:22} ] }; var result = template("eachTemplate",family); var eachBox = document.getElementById("eachBox"); eachBox.innerHTML = result; </script> </body> </html>