前端模板template-web簡單使用
阿新 • • 發佈：2019-02-02
template-web
M：template-web是什麼東西，有什麼作用？
Z： 這是一個模板引擎，簡單來說就是構建一個模板，讓其生成html的js程式碼。如果不用該js，手動來操作，我們可能需要繁雜的拼接html標籤，還要做for迴圈。
M：具體使用的方式是怎麼樣的呢？
Z：這裡有個demo
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body> 簡要步驟就是：1.製作模板 2.將資料插入模板中 3.將模板插入html程式碼中
if判斷
M：但是呢，如果我們需要根據資料的不同，做出調整，要怎麼使用不同的模板呢？
Z：可以在模板中進行判斷，template-web提供的判斷方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: red 1px solid;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="ifBox"></div>
<div id="norBox"></div>
<div id="eachBox"></div>
<!--
引入模板引擎:一般用於在網路請求之後，展示相同的多條資料
-->
<script type="text/javascript" src="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>html效果
M：如果我想插入一段html標籤，例如<a>標籤，但是我直接插進去顯示的是標籤的內容，而並非效果，該怎麼將html文字轉化為html實現效果呢？
Z：在{{內容}}的內容前面新增@標誌，如以下程式碼，即可將html文字轉化為html實現效果
<!--
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>迴圈
M：現在有種需求就是，我得到返回資料的是一堆陣列，我希望將陣列迴圈輸出模板，應該怎麼實現？
Z：使用template-web.js自帶的迴圈語句
<!--
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>D：以上三種效果分別對應以下三個紅框（if判斷，html效果，迴圈）
D：最後公佈template-web.js的下載地址
連結：https://pan.baidu.com/s/1wBN9kZu0-Y1jKGJZHmmrvg 密碼：i47d(本文例子來自LQ-劉強)