前端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>