日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery-tmpl 模板引擎使用方法说明

發布時間：2024/3/24 编程问答 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery-tmpl 模板引擎使用方法说明 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery-tmpl的幾種常用標簽分別有：

  • ${}
  • {{each}}
  • {{if}}
  • {{else}}
  • {{html}}

不常用標簽是：

  • {{=}}
  • {{tmpl}}
  • {{wrap}}

1、${}和{{=}}

${}等同于{{=}}，輸出變量 ，${}里面還可以放表達式 (=和變量之間一定要有空格，否則無效)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script src="../js/jquery.tmpl.js"></script>
<title>測試jQuery-tmpl的使用</title>
</head>
<body>
<div id="div_demo"></div>
</body>
<!-- 模板1，測試${}、{{=}}標簽的使用 -->
<script id="demo" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">{{= name}}</span>
<span style="margin-left:10px;">${age}</span>
<span style="margin-left:10px;">${number}</span>
</div>

</script>
<script type="text/javascript">
//手動初始化數據
var users = [{id: 1, name: 'xiaoming', age: 12, number: '001'}, {id: 2, name: 'xiaowang', age: 13, number: '002'}];
//調用模板進行渲染
$("#demo").tmpl(users).appendTo('#div_demo');
</script>
</html>

這是一個完整的例子，先定義一個模板，模板里面定義好怎么展示對應數據，推薦使用${}標簽，然后在js里面手動初始化數據，在實際項目中一般通過ajax從服務器上獲取，然后調用模板進行渲染，再把渲染后的html加入到指定的標簽下。

2、{{each}}標簽

該標簽提供循環邏輯，使用$value訪問迭代變量，也可以自定義迭代變量(i,value)，下面舉個例子說明下兩種方式的用法

模板代碼：

<!-- {{each}}標簽的使用 -->
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:${user.name}</div>
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>

js調用代碼：

<script type="text/javascript">
var eachData = {
users : [ {
name : 'xiaoming'
}, {
name : 'xiaowang'
} ],
departs : [ {
name : 'IT'
}, {
name : 'test'
} ]
};
$("#each").tmpl(eachData).appendTo('#div_each');
</script>

3、{{if }} {{else}}標簽

選擇判斷標簽，提供了分支邏輯 {{else}} 相當于else if

<!--{{if }} {{else}}標簽的使用 -->
<script id="ifelse" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;"><span>${id}</span><span style="margin-left:10px;">{{= name}}</span>
{{if status}}
<span>status:${status}</span>
{{else app}}
<span>app:${app}</span>
{{else}}
<span>none</span>
{{/if}}
</div>
</script>
<script type="text/javascript">
var users = [ {
id : 1,
name : 'xiaoming',
status : 1,
app : 0
}, {
id : 2,
name : 'xiaowang',
app : 1
}, {
id : 3,
name : 'xiaogang'
} ];
$("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>

4、{{html}}標簽，輸出變量html,但是沒有html編碼，適合輸出html代碼

<!--{{html}}標簽的使用 -->
<script id="html" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">${name}</span>
${button}
{{html button}}
</div>
</script>
<script type="text/javascript">
var user = {
id : 1,
name : 'xiaoming',
button : '<button>save</button>'
};
$("#html").tmpl(user).appendTo('#div_html');
</script>

使用了html標簽的html內容自動轉成了按鈕

5、{{tmpl}}嵌套模板

<body>
<div id=tmpl></div>
</body>
<!--{{tmpl}}嵌套模版、$data的使用 -->
<script id="tmpl1" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${id}</span>
<span style="margin-left:10px;">{{tmpl($data) '#tmpl2'}}</span>
</div>
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
{{each name}}
${$value}
{{/each}}
</script>
<script type="text/javascript">
var users = [ {
id : 1,
name : [ 'zhang', 'xiao', 'liang' ]
}, {
id : 2,
name : [ 'li', 'tian', 'ming' ]
} ];
$("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>

思路就是，在模板1里面嵌套了模板2，模板2的作用就是把name數組連起來顯示，這個例子中還使用到了$data標簽，$data代表當前的數據。

6、{{wrap}}包裝器標簽

<body>
<div id=wrap></div>
</body>
<!--{{wrap}}包裝器、$item的使用 -->
<script id="myTmpl" type="text/x-jquery-tmpl">
The following wraps and reorders some HTML content:
{{wrap "#tableWrapper"}}
<h3>One</h3>
<div>
First <b>content</b>
</div>
<h3>Two</h3>
<div>
And <em>more</em> <b>content</b>...
</div>
{{/wrap}}
</script>
<script id="tableWrapper" type="text/x-jquery-tmpl">
<table cellspacing="0" cellpadding="3" border="1"><tbody>
<tr>
{{each $item.html("h3", true)}}
<td>
${$value}
</td>
{{/each}}
</tr>
<tr>
{{each $item.html("div")}}
<td>
{{html $value}}
</td>
{{/each}}
</tr>
</tbody></table>
</script>
<script type="text/javascript">
$('#myTmpl').tmpl().appendTo('#wrap');
</script>

在myTmpl模板里面引用了包裝器模板tableWrapper來包裝myTmpl模板，tableWrapper是一個表格包裝模板，把所有h3標簽內容作為表格第一行，把所有div下面的標簽作為表格的第二行，所以對myTmpl進行了重組，在這個例子中還用到另一個標簽$item，代表當前的模板。

總結

以上是生活随笔為你收集整理的jQuery-tmpl 模板引擎使用方法说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。