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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery-tmpl 模板引擎使用方法说明相关的知识,希望对你有一定的参考价值。

jQuery-tmpl的几种常用标签分别有:

不常用标签是:

  • =
  • 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 模板引擎使用方法说明的主要内容,如果未能解决你的问题,请参考以下文章

Grails 干扰 jquery-tmpl 语法

jQuery 模板文档在哪里?

在 jQuery 模板中获取当前项目索引的最简单方法

flask 模板引擎

VM模板引擎语法

laytpl( Layui 的一款轻量 JavaScript 模板引擎)