JavaScript模板引擎Template.js基本使用詳解
阿新 • • 發佈：2018-12-21
template.js是一款JavaScript模板引擎，提供一套模板語法，簡單好用，開發者可以寫一個模板區塊，每次傳入的資料，生成對應資料產生的HTML片段，渲染不同的效果。官網：簡潔語法版 https://github.com/aui/art-template/wiki/syntax:simple
一.引用js
下載artTemplate後，找到template.js引入到頁面。
<script src="../dist/template.js"></script>二.基本使用方法
1.第一種使用方法
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>template基本使用</title> <script src="../dist/template.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> //{{if}}{{/if}}用來判斷 {{each}}{{/each}}迴圈 {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}} </script> <script> var data = { title: 'template基本使用例子', isAdmin: true, list: ['部落格', '學院', '下載', '圖文課', '論壇', 'APP', '問答','商城'] }; var thtml = template('test', data); document.getElementById('content').innerHTML = html; //或者 $('#content').empty().append(thtml).show(); </script> </body> </html>
效果：
template基本使用例子
• 索引1 ：部落格
• 索引2 ：學院
• 索引3 ：下載
• 索引4 ：圖文課
• 索引5 ：論壇
• 索引6 ：APP
• 索引7 ：問答
• 索引8 ：商城2.第二種使用方法（引用模板）
2.1 在專案資料夾中新建template資料夾，把所需要的各種模板單獨放入對應的html裡面
2.2 模板頁程式碼（2.1中listTemplate.html）
{{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li> 索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}}
2.3 使用ajax中的get方法對html進行模板替換
<script> var obj = { title: '模板頁獲取例子', isAdmin: true, list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他'] }; //var listData = obj.list; var thtml = $.get('template/listTemplate.html',function(data) { var render = template.compile(data); //$('#content').empty().append(render(listData)); $('#content').empty().append(render(obj)); }); //或者 //var thtml = $.get('template/listTemplate.html',function (data) { // var render = template.compile(data); // var str = render(obj); // document.getElementById('content').innerHTML = str; //})； </script>
2.4 模板中內嵌模板
<li>
<button class="btn-contribution"
type="{{$value.type}}"
anchor_id="{{$value.pfid}}">
<span class="btn-title">貢獻榜</span>
<span class="top-user-groups">
{{include 'top3Template' $value.top3}}
</span>
</button>
</li>
//top3Template模板直接寫在主html裡面
<!--top3子模板-->
{{each}}
<span class="top-user top-{{$index+1}}">
<img src="{{$value.headimg}}" pfid="{{$value.pfid}}" alt="">
</span>
{{/each}}總結：
先使用jquery的get方法獲取模板頁，然後再利用template.compile()獲取渲染內容，然後將資料obj渲染進去，最後新增到頁面裡即可。
注意：這時候就不能使用template()方法進行模板替換了，必須使用template.compile()及render()進行模板替換才行。