前言：

　　下載地址：https://pan.baidu.com/s/1duHf6U4prEnbMXVO9JC-mQ 密碼：2tgp

　　template-web.js是一個模板引擎，簡單來說就是在頁面上建立一個模板，然後我們把資料填上去顯示在頁面上。

　　為什麼需要它呢？試想一下假設如果你獲取了一個列表的資料你怎麼處理讓它顯示在頁面上，是每條建立一個html然後加上去嗎？這樣的程式碼看上去是不是比較冗餘而且顯得不是特別美觀？所以這個時候我們只要呼叫這個模板簡單為一條資料書寫頁面載入就可以了，甚至如果資料需要判斷顯示不同的效果也可以通過它來做，比如得到的列表資料有個欄位為0而有一個為1，需要顯示不同的效果也可以通過它來做，下面我通過三種不同的使用方式來展示它的使用方法。

　　一.獲得了一個物件直接呼叫

　　HTML：

    <div id="point">
        
    </div>
    
<script id="model1" type="text/html">
    <div>
        {{name}}
    </div>
    <div>
        {{email}}
    </div>
</script>

　　Js：

$(function(){
    var data1={
        "name":"Mr.bring",
        
 
"email":"[email protected]"
    }
    var html = template('model1',data1)
    $("#point").append(html)
})

　　二.獲得了一個列表迴圈呼叫

　　HTML：

<div id="point">
        
    </div>
    
<script id="model1" type="text/html">
    {{each list item index}}
        <div>{{item[0]}}</div>
        <
 
div>{{item[1]}}</div>
    {{/each}}
</script>

　　Js：

$(function() {
    var data1 = [
        ["Mr.bring",  "[email protected]"],
        ["Mr.autumn",  "[email protected]"],
        ["Mr.winter",  "[email protected]"],
    ]

    var html = template('model1', {list:data1})
    $("#point").append(html)
})

　　三.獲得了一個列表資料需要進行判斷

　　HTML：

    <div id="point">
        
    </div>
    
<script id="model1" type="text/html">
    {{each list item index}}
        {{if item[1] == 1}}
        <div>True</div>
        {{else if item[1] == 2}}
        <div>False</div>
        {{/if}}
    {{/each}}
</script>

　　Js：

$(function() {
    var data1 = [
        ["Mr.bring",  1],
        ["Mr.autumn",  2]
    ]

    var html = template('model1', {list:data1})
    $("#point").append(html)
})

　　其他：有的時候我們在使用模板的時候可能會報錯，因為很多的框架內建了模板語法，所以如果需要使用該模板的話可能需要對相容性進行一些設定，比如在django框架中需要在模板中就需要如下修改：

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

{% verbatim %}
　　　......
{% endverbatim %}

 </script>