前端template-web.js的使用

前言：

　　下載地址：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":"[e-mail]" } 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",  "[e-mail]"], ["Mr.autumn",  "[e-mail]"], ["Mr.winter",  "[e-mail]"], ] 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>