js模板引擎art-template基礎語法和搭配ajax渲染頁面
阿新 • • 發佈：2019-02-13
在github下載的aui/資料夾裡
引入檔案：
<script type="text/javascript" src="artTemplate/dist/template.js"></script>簡易寫法demo：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>basic-demo</title> <script src="../dist/template.js"></script> </head> <body> <div id="content"></div> <script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> {{/if}} </script> <script> var data = { title: '基本例子', isAdmin: true, list: ['文藝', '部落格', '攝影', '電影', '民謠', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html>
輸出效果:
↑以上是簡易寫法,還有原生和不重新命名寫法↓
原生寫法：
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>不重新命名的寫法：
{{if admin}} {{include 'admin_content'}} {{each list}} <div>{{$index}}. {{$value.user}}</div> {{/each}} {{/if}}
總結，原生寫法不需要深究，推薦使用簡易寫法.
↓分割線---------------------ajax---------------------分割線---------------------ajax---------------------分割線↓
待更新