jquery.tmpl的使用

阿新 • • 發佈：2019-01-13

有程式設計基礎的朋友們都應該知道一個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;">

<spanstyle="margin-left:10px;">${$item.getName("")}</span>

　　</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

jquery.tmpl的使用

一、Tmpl中的幾種常用tag

二、tmpl中的基本用法

三、$data $item

jquery.tmpl的使用

jquery tmpl模板

jquery tmpl.js與 juicer渲染對比

tmpl 模板化引擎載入資料 Jquery

jquery 獲取 outerHtml

jquery 操作 select 默認選擇第一個元素

jquery 深入學習筆記之中的一個（事件綁定）

jquery的AJAX中各個事件執行順序

分針網——IT教育：jquery選擇器的用法

jQuery選擇器絕對定位實現div覆蓋

JQuery操作Ajax

jQuery滑動解鎖

Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

jquery在ajax新加入的元素後綁定事件click

jQuery Chosen 使用

jquery實現全選/反選功能

JQuery中內容操作函數、validation表單校驗

分針網——每日分享： jquery選擇器的用法

Jquery使容器自適應瀏覽器窗口

jQuery選擇器引擎和Sizzle介紹

jquery.tmpl的使用

一、Tmpl中的幾種常用tag

二、tmpl中的基本用法

三、$data $item

相關推薦