jquery.tmpl的使用

最新推荐文章于 2023-05-30 19:59:38 发布

weixin_34242819

最新推荐文章于 2023-05-30 19:59:38 发布

阅读量104

点赞数

文章标签：前端测试 javascript ViewUI

原文链接：https://my.oschina.net/mickelfeng/blog/1563740

版权

2019独角兽企业重金招聘Python工程师标准>>>

有编程基础的朋友们都应该知道一个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>