JSON模板引擎--artTemplate

一般狀況下，在咱們使用ajax請求數據得到一個json格式的響應體，而且要將得到的相應數據填充到HTML頁面上的時候，可能須要本身拼接字符串，這樣比較麻煩，而使用模板引擎就能夠幫咱們省卻本身拼接字符串的過程。javascript

使用模板引擎其實就是預先寫好HTML結構代碼，而後調用模板引擎第三方庫，自動把數據填充到這個HTML裏。html

今天要介紹的是artTemplate這款模板框架，下載地址：https://github.com/aui/art-template，下載完成以後解壓，而後找到 lib 文件夾，把裏面的 template-web.js 文件放到你的項目目錄下java

1. 基本使用

1.1 準備一個模板

1 <script type="xxxx" id="tpl">
2     <p>
3  我叫<span><%= name %></span>，今年<span><%= age %</span>歲了 4     </p>
5 </script>

說明：git

要用script標籤，必須給type屬性，可是值能夠隨便寫，只要不是 text/javascript 就能夠，可是咱們通常寫 text/html
github
必需要給這個script標籤加 id ，由於後面須要找到標籤內的模板web
模板裏就是將來想顯示的html代碼，只是裏面有些值不能寫死，要根據json數據來填充，因此把不寫死的數據用 <%= 屬性名 %> 包起來ajax

1.2 導入框架

<script src="./template-web.js"></script>

1.3 填充模板

1 //JSON字符串轉化爲對象
2 var obj = JSON.parse(xhr.responseText); 3 
4 //找到tpl，並用obj對象填充,填充後的結果是一段html代碼
5 var html = template('tpl',obj); 6 
7 //打印看結果
8 console.log(html);

打印結果爲：json

能夠看到，當用了模板引擎後，會自動把JSON對應的屬性值，填充到模板中一樣屬性名的地方，以下圖數組

2 用模板填充JSON數組

2.1 準備模板

 1 <script type="text/html" id="tpl">
 2         <!-- list是咱們本身起的虛擬數組名  3  到時json數據一拿到，把json數組賦值給這個list  4  就能自動把JSON數組每條數據都遍歷成tr顯示了  5          -->
 6         <% for(var i = 0;i < list.length; i++){ %>
 7 
 8             <tr>
 9                 <td><%= list[i]['Id'] %></td>
10                 <td><%= list[i]['name'] %></td>
11                 <td><%= list[i]['age'] %></td>
12                 <td><%= list[i]['score'] %></td>
13     </tr>
14         <% } %>
15 </script>

說明：list這個名字能夠隨便起，用模板填充時，把真實JSON數組傳遞給list就能夠填充了框架

2.2 導入框架（跟基本使用同樣）

2.3 填充模板

1 var data = JSON.parse(xhr.responseText); 2 //參數2：list:data 意思是把data這個真實的JSON數組替換掉模板裏的list值
3 var html = template('tpl', { list: data }); 4 document.querySelector('tbody').innerHTML = html;

注意：模板裏的數組叫list,那麼參數2也叫list，要注意別寫錯。

3 使用框架內置的遍歷語法

3.1 語法

{{each list value key}}

說明：
- list是本身定義的虛擬數組或對象，使用模板時用真實JSON數組或對象替換
- 若是list是對象，那麼value就是屬性值，若是list是數組，那麼value獲得的就是元素
- 若是list是對象，那麼key就是屬性名，若是list是數組，那麼key就是下標

例：

 1 <script type="text/html" id="tpl">
 2 
 3  {{each list value key}}  4          <tr>
 5              <td>{{value.Id}}</td>
 6              <td>{{value.name}}</td>
 7              <td>{{value.age}}</td>
 8              <td>{{value.score}}</td>
 9          </tr>
10  {{/each}}
11 
12 </script>

3.2 調用模板

1 //把報文轉換爲JSON數組
2 var data = JSON.parse(xhr.responseText); 3 //使用模板替換
4 var html = template('tpl', { list: data }); 5 //替換後的內容放到網頁
6 document.querySelector('tbody').innerHTML = html;

3.3 圖解

artTemplate模板引擎的基本使用就這樣，按照步驟來就能夠了，但願對你們的學習有所幫助