JSON模板引擎--artTemplate

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

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

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

1. 基本使用

1.1 准備一個模板

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

說明：

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

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

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

1.2 導入框架

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

1.3 填充模板

//JSON字符串轉化為對象
var obj = JSON.parse(xhr.responseText);

//找到tpl，並用obj對象填充,填充后的結果是一段html代碼
var html = template('tpl',obj);

//打印看結果
console.log(html);

打印結果為：

• 可以看到，當用了模板引擎后，會自動把JSON對應的屬性值，填充到模板中同樣屬性名的地方，如下圖

 

2 用模板填充JSON數組

2.1 准備模板

<script type="text/html" id="tpl">
        <!-- list是我們自己起的虛擬數組名
            到時json數據一拿到，把json數組賦值給這個list
            就能自動把JSON數組每條數據都遍歷成tr顯示了
         -->
        <% for(var i = 0;i < list.length; i++){ %>

            <tr>
                <td><%= list[i]['Id'] %></td>
                <td><%= list[i]['name'] %></td>
                <td><%= list[i]['age'] %></td>
                <td><%= list[i]['score'] %></td>
    </tr>
        <% } %>
</script>

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

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

2.3 填充模板

var data = JSON.parse(xhr.responseText);
//參數2：list:data  意思是把data這個真實的JSON數組替換掉模板里的list值
var html = template('tpl', { list: data });
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就是下標

例：

<script type="text/html" id="tpl">

         {{each list value key}}
         <tr>
             <td>{{value.Id}}</td>
             <td>{{value.name}}</td>
             <td>{{value.age}}</td>
             <td>{{value.score}}</td>
         </tr>
         {{/each}}

</script>

3.2 調用模板

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

3.3 圖解

 

artTemplate模板引擎的基本使用就這樣，按照步驟來就可以了，希望對大家的學習有所幫助