JSON模板引擎--artTemplate

 通常情況下，在我們使用ajax請求資料獲得一個json格式的響應體，並且要將獲得的相應資料填充到HTML頁面上的時候，可能需要自己拼接字串，這樣比較麻煩，而使用模板引擎就可以幫我們省卻自己拼接字串的過程。

使用模板引擎其實就是預先寫好HTML結構代碼，然後調用模板引擎第三方庫，自動把資料填充到這個HTML裡。

今天要介紹的是artTemplate這款模板架構，：github.com/aui/art-template，下載完成之後解壓，然後找到 lib 檔案夾，把裡面的 template-web.js 檔案放到你的項目目錄下

1. 基本使用1.1 準備一個模板

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

說明：

• 要用script標籤，必須給type屬性，但是值可以隨便寫，只要不是 text/javascript 就可以，但是我們一般寫 text/html
  

• 必須要給這個script標籤加 id ，因為後面需要找到標籤內的模板

• 模板裡就是未來想顯示的html代碼，只是裡面有些值不能寫死，要根據json資料來填充，所以把不寫死的資料用 <%= 屬性名稱 %> 包起來

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對應的屬性值，填充到模板中同樣屬性名稱的地方，如

 

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模板引擎的基本使用就這樣，按照步驟來就可以了，希望對大家的學習有所協助