循環{{each arr as value i}}
<body>
<input type="text" placeholder="請輸入" id="keyword" value="java"/>
<input type="button" value="確定" id="but" />
<ul id="uu"></ul>
<!-- 用於jq庫 -->
<script src="../js/jquery-1.12.1.js"></script>
<!-- 引入模版 -->
<script src="../js/template-web.js"></script>
<!-- 編寫模版 -->
<script id="resultTemplate" type="text/html">
//each: 循環
//s: data中的屬性
//as: 關鍵字
//value: 每次遍歷的值
//i: 索引
{{each s as value i}}
<li>{{i}}:{{value}}</li>
{{/each}}
</script>
<script>
document.getElementById("but").onclick = function () {
var keyword = document.getElementById("keyword").value;
$.ajax({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data: { wd: keyword },
success: function (data) {
//將模版和數據一起傳入, 返回的是已經編寫好的html代碼
var html = template("resultTemplate", data);
//將代碼直接放入即可使用
document.getElementById("uu").innerHTML= html;
},
dataType: "jsonp",
jsonp: "cb",
jsonpCallback: "haha"
});
};
</script>
</body>
if語句 {{if isAdmain}}
<body>
<div id="conetent"></div>
<!-- 引擎模版 -->
<script src="../js/template-web.js"></script>
<!-- 模版 -->
<script type="text/html" id="text">
<!-- if語句: isAdmain: data對象中的關鍵字 -->
{{if isAdmain}}
<!-- data中的關鍵字 -->
<h2>title</h2>
<!-- ul放在循環語句外面, 不循環 -->
<ul>
{{each list as value i}}
<li>{{i}}:{{value}}</li>
{{/each}}
</ul>
{{/if}}
{{if !isAdmain}}
<h1>沒有該數據</h1>
{{/if}}
</script>
<script>
var data = {
title:'條件判斷基本粒子',
isAdmain:false,
list:['文藝','青年','沙雕','白龍馬','火焰山','上完課','去拉屎']
};
var html = template("text",data);
document.getElementById("conetent").innerHTML = html;
</script>
</body>
當數據只是數組格式時
<body>
<div id="content"></div>
<!-- 引入引擎模版 -->
<script src="../js/template-web.js"></script>
<!-- 編寫模版 -->
<script id="text" type="text/html">
<ul>
<!-- arr: 需要解析的那個數組的名字叫什麼就寫什麼 -->
{{each arr as value i}}
<li>{{i}}:{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = ["張三丰", "張翠山", "張無忌", "張大俠", "張二狗", "張小福"];
//數組模式無法.出來, 所以封裝進對象裏
var temp = {};
temp.arr = data;
var html = template("text", temp);
document.getElementById("content").innerHTML = html;
</script>
</body>
轉義{{#}} 與 不轉義{{}}
<body>
<div id="content"></div>
<!-- 引入引擎模版 -->
<script src="../js/template-web.js"></script>
<!-- 建模版 -->
<script id="text" type="text/html">
<p>不轉義: {{#value}}</p>
<p>轉義: {{value}}</p>
</script>
<script>
//數據
var data = {value:'<span style="olor:red">這是一個P</span>'};
//放入方法內
var html = template("text",data);
document.getElementById("content").innerHTML = html;
</script>
</body>
案例
天氣查詢案例， 該編碼爲中國氣象網城市編碼（不是地區編碼）
| 地址 | http://cdn.weather.hao.360.cn/sed_api_weather_info.php |
|---|---|
| 作用 | 獲取天氣信息 |
| 請求類型 | get |
| 參數 | app:hao360(固定值); code:城市編碼(101010100北京); |
| _jsonp:回調函數名 | |
| 返回字段說明 | area:地區信息 |
| pm25: pm2.5數據 | |
| pubdate:數據發佈日期 | |
| pubtime:數據發佈時間 | |
| time:時間戳 | |
| weather:天氣信息 | |
| date:時間 | |
| day: 白天 | |
| night:黑夜 | |
| dawn:黎明 |
<body>
<select name="city" id="city">
<option value="101010100">北京市</option>
<option value="101280101">廣州市</option>
</select>
<input type="button" id="but" value="查詢" />
<div id="conetent"></div>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<script type="text/javascript" src="../js/template-web.js"></script>
<script type="text/html" id="weatherTemplate">
<ul>
<span>發佈時間: {{pubdate}} - {{pubtime}}</span>
<ul>
<li>城市: {{realtime.city_name}}</li>
<li>溫度: {{realtime.weather.temperature}}</li>
<li>天氣: {{realtime.weather.info}}</li>
<li>風向: {{realtime.wind.direct}}</li>
<li>風級: {{realtime.wind.power}}</li>
</ul>
</ul>
</script>
<script>
document.getElementById("but").onclick = function () {
//獲取地區編碼
var cityValue = document.getElementById("city").value;
//發送跨域請求
$.ajax({
url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php",
data: {
app: "hao360",
code: cityValue
},
jsonp: "_jsonp",
dataType: "jsonp",
success: function (data) {
console.log(data);
console.log("==========================================================");
//放入模版
var html = template("weatherTemplate", data);
document.getElementById("conetent").innerHTML = html;
}
});
};
</script>
</body>
