模板引擎的使用
标签：
模板引擎的使用
1. 选择一个模板引擎
https://github.com/tj/consolidate.js#supported-template-engines
2. 下载模板引擎JS文件
3. 引入到页面中
4. 筹备一个模板
5. 筹备一个数据
6. 通过模板引擎的JS供给的一个函数将模板和数据整合得到衬着功效HTML
7. 将衬着功效的HTML 设置到 默认元素的 innerHTML 中
具体如下
1. 选择一个模板引擎
2. 下载模板引擎JS文件
3. 引入到页面中
<script src="http://www.mamicode.com/template-web.js"></script>
4. 筹备一个模板
这里是要循环遍历，翻阅文档，找到循环的模板
each 内部 $value 拿到的是当前被遍历的阿谁元素
<script type="text/x-art-template"> {{each comments}} <tr> <td>{{$value.author}}</td> <td>{{$value.content}}</td> <td>{{$value.created}}</td> </tr> {{/each}} </script>
5. 筹备一个数据
模板所需数据，，这里是返回数据result下面的data
var context = { comments: result.data }
6. 通过模板引擎的JS供给的一个函数将模板和数据整合得到衬着功效HTML
var html = template(‘tmpl‘, context) console.log(html)
7. 将衬着功效的HTML 设置到 默认元素的 innerHTML 中
document.getElementById(‘demo‘).innerHTML = html
操练代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX 动态表格衬着</title> </head> <body> <table id="demo"></table> <script src="http://www.mamicode.com/template-web.js"></script> <script id="tmpl" type="text/x-art-template"> {{ each comments }} <tr> <td>{{ $value.author }}</td> <td>{{ $value.content }}</td> <td>{{ $value.created }}</td> </tr> {{/each}} </script> <script> var xhr = new XMLHttpRequest() xhr.open(‘GET‘, ‘test.php‘) xhr.send() xhr.onreadystatechange = function () { if (this.readyState !== 4) return var result = JSON.parse(this.responseText) var content = { comments: result.data } var html = template(‘tmpl‘, content) console.log(html) document.getElementById(‘demo‘).innerHTML = html } </script> </body> </html>
AJAX---模板引擎的使用
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30333.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")