jquery.tmpl的使用

最新推荐文章于 2021-03-12 01:11:40 发布

Emily_lhj

最新推荐文章于 2021-03-12 01:11:40 发布

阅读量3.6k

点赞数

分类专栏： jQuery 文章标签： jquery tmpl 数据分离利用模版生成HTML的框架

本文链接：https://blog.csdn.net/Emily_lhj/article/details/53260566

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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