// 1. 選擇一個模板引擎
// https://github.com/tj/consolidate.js#supported-template-engines
// 2. 下載模板引擎JS文件
// 3. 引入到頁面中
// 4. 準(zhǔn)備一個模板
// 5. 準(zhǔn)備一個數(shù)據(jù)
// 6. 通過模板引擎的JS提供的一個函數(shù)將模板和數(shù)據(jù)整合得到渲染結(jié)果HTML
// 7. 將渲染結(jié)果的HTML 設(shè)置到 默認(rèn)元素的 innerHTML 中
// var tmpl = '{{if user}}<h2>{{user.name}}</h2>{{/if}}'
//
// 為什么不在JS變量中寫模板壶唤？
// 1. 如果將模板寫到JS中饶囚，維護(hù)不方便尊残，不能換行可训，沒有著色
// 為什么使用script標(biāo)記
// 1. script不會顯示在界面
script 標(biāo)簽的特點是
1. innerHTML 永遠(yuǎn)不會顯示在界面上
2. 如果 type 不等于 text/javascript 的話，內(nèi)部的內(nèi)容不會作為 JavaScript 執(zhí)行
===================================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX 動態(tài)表格渲染</title>
</head>
<body>
<table id="demo"></table>
<!--
script 標(biāo)簽的特點是
1. innerHTML 永遠(yuǎn)不會顯示在界面上
2. 如果 type 不等于 text/javascript 的話甘凭，內(nèi)部的內(nèi)容不會作為 JavaScript 執(zhí)行
-->
<script id="tmpl" type="text/x-art-template">
{{each comments}}
<!-- each 內(nèi)部 $value 拿到的是當(dāng)前被遍歷的那個元素 -->
<tr>
<td>{{$value.author}}</td>
<td>{{$value.content}}</td>
<td>{{$value.created}}</td>
</tr>
{{/each}}
</script>
<script src="template-web.js"></script>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'test.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
var res = JSON.parse(this.responseText)
// 模板所需數(shù)據(jù)
var context = { comments: res.data }
// 借助模板引擎的API 渲染數(shù)據(jù)
var html = template('tmpl', context)
console.log(html)
document.getElementById('demo').innerHTML = html
// 1. 選擇一個模板引擎
// https://github.com/tj/consolidate.js#supported-template-engines
// 2. 下載模板引擎JS文件
// 3. 引入到頁面中
// 4. 準(zhǔn)備一個模板
// 5. 準(zhǔn)備一個數(shù)據(jù)
// 6. 通過模板引擎的JS提供的一個函數(shù)將模板和數(shù)據(jù)整合得到渲染結(jié)果HTML
// 7. 將渲染結(jié)果的HTML 設(shè)置到 默認(rèn)元素的 innerHTML 中
// var tmpl = '{{if user}}<h2>{{user.name}}</h2>{{/if}}'
//
// 為什么不在JS變量中寫模板稀拐？
// 1. 如果將模板寫到JS中，維護(hù)不方便丹弱，不能換行德撬，沒有著色
// 為什么使用script標(biāo)記
// 1. script不會顯示在界面
}
</script>
</body>
</html>
