jquery.tmpl的使用

      有编程基础的朋友们都应该知道一个MVC这个概念,在前端的编程中,我们常常需要动态获取数据,将数据在前台展示出来。展示时,html的拼接成了一个十分令人苦恼的问题。如果能在前端中也有类似MVC概念的应用,将数据与html标签进行分离,将大大减少我们的工作量,提高工作效率,同时也提高我们代码的可维护性。近期在前端学习中发现jquery中一个很方便的插件:tmpl。下载地址:https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.js。应用时必须引入1.4以上版本的jquery。

一、Tmpl中的几种常用tag

1、${key} 与 {{= key}}作用相同,表示取值,输出变量(=和变量之间一定要有空格,否则无效)

${}里面还可以放表达式

如${key +/- n}

 

2、{{if}}, {{else}}

    {{if Status}}

          <span>Status${Status}</span>

    {{else App}}//注意else的时候不是else  if

          <span>App${App}</span>

    {{else}}

          <span>None</span>

    {{/if}}

3、{{each}}

提供循环逻辑,$value访问迭代变量 也可以自定义迭代变量(i,value)

4、{{html}}

    取出html代码,用法{{html html}},可理解为html格式的变量

5、{{tmpl}} and{{wrap}}.

二、tmpl中的基本用法

<!DOCTYPE html> 
<html> 
<head> 
<script src="js/jquery-2.0.3.js"></script> 
<script src="js/jquery.tmpl.js"></script><!-- https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.js -->
</head> 
<body> 
<ul id="list"></ul>
<script type="text/template" id='UserTmpl'>
    <li>
        <span>${ID}</span>
        <span>{{= NickName}}</span>
        <span>${Age+1}</span>

        <!--判断,等同于jq中的if  else,不同之处在于,要写end if-->
        {{if Gender}}
            <span>男</span>
        {{else}}
            <span>女</span>
        {{/if}}
        
        <!--循环,类似jq中的each,对于数组中的每个值套入模板进行操作,value类似于this此处采用$value迭代变量,-->
        <ul>
            {{each major}}
                <li>采用$value迭代变量 ${$value.name}</li>
            {{/each}}
        </ul> 

        <!--循环,通过自定义迭代变量(i,value) -->
        <ul> 
            {{each(i,la)  major}}
                <li>自定义迭代变量:${i+1}:{{= la.name}}</li>
            {{/each}}
        </ul>
        
        <!--取出html代码,此处将呈现一个按钮-->
        {{html ht}}
    </li>
</script>

<!--定义模板,根据需求在所需处取数据中的值-->
<script type="text/javascript">
    var users=[
        {ID:"0001",NickName:"小白",Gender:false,Age:18, major:[{name: "语文"},{name: "数学"}], ht: "<button>确认</button>"},
        {ID:"0002",NickName:"小黑",Gender:true,Age:20, major:[{name: "英语"},{name: "生物"}]}
    ]; /*定义数据,数据一般是数组或json类型的*/
    $("#list").append($("#UserTmpl").tmpl(users));
    /*("模板script标签的id").tmpl(数据,数组形式),返回将数据套入模板后的html*/
</script>
</body> 
</html>


三、$data $item

(以下例子来自于http://www.2cto.com/kf/201401/271190.html

$item代表当前的模板;$data代表当前的数据。

    <divid="div_item_data"></div>

    <scriptid="item_data" type="text/x-jquery-tmpl">

        <divstyle="margin-bottom:10px;">

        <span>${$data.ID}</span><!--$data代表当前的数据 -->

        <spanstyle="margin-left:10px;">${$item.getName("")}</span><!--$item代表当前的模板-->

      </div>

    </script>

    <scripttype="text/javascript">

    var users = [{ ID: 'think8848', Name:['Joseph', 'Chan'] }, { ID: 'aCloud', Name: ['Mary', 'Cheung']}];

       $("#item_data").tmpl(users,

                {

                   getName: function (spr) {

                       return this.data.Name.join(spr);

                    }

                }).appendTo('#div_item_data');

    </script>

以上是本人找到的参考资料,主要参考于

    http://www.cnblogs.com/Sunlimi/p/4378646.html

    http://www.2cto.com/kf/201401/271190.html


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值