第4章 jquerytemplate生成模板介绍
Jquery-template是一个jquery的插件，作用是定义一个html的模板，将一串类似的数据使用模板的样式，添加到html页面的指定位置。 最开始vue还没出来之前，我们在页面中使用ajax获取了一些数据，然后解析这些数据，并手动生成html内容，添加到一个<div>范围内。然而这种做法实在是太笨太丑了，需要不停地append字符串，累赘而不美观，写起来也累。因为是要生成一个table，事实上table中每一行都是类似的，只是数据不同，所以可以使用Jquery-template来定义一个<tr>模板，然后将所有的数据，按照模板的格式、样式添加到指定的<table>。
我为什么选择使用jquerytemplate生成vue源码， 因为我们可视化表单就是属于搭积木模式，进行堆搭起来的，具有很强的规律性，然而vue本身就是属于模板语法，如果使用vue生成vue源码，就要处理各种vue语法的关键词，这样使vue生成vue源码变得很复杂，而jquerytemplate跟vue模板很类似，利用jquerytemplate生成vue源码就变得很简单了。
首先我们了解一下jquerytemplate基本用法。
tmpl常用标签
${}, {{each}}, {{if}}, {{else}}, {{html}}
不常用标签
{{=}},{{tmpl}} and {{wrap}}.
1.
${}等同与{{=}}是输出变量 ${}里面还可以放表达式 （使用{{=}}的时候=和变量之间一定要有空格，否则无效，即为：{{= 变量}}）
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 使用方式
# 示例1：
<div id="div_demo">
</div>
<script id="demo" type="text/x-jquery-tmpl">
<div >
<span>${ID}</span>
<span style="margin-left:10px;">{{= ID}}</span>
</div>
</script>
<script type="text/javascript">
var users = [{ ID: '1111'}];
$("#demo").tmpl(users).appendTo('#div_demo');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
输出结果
<div id="div_demo">
<div >
<span>1111</span>
<span style="margin-left:10px;">1111</span>
</div>
</div>
1
2
3
4
5
6
2
3
4
5
6
# 示例2：
--------{{each}} 提供循环逻辑，$value访问迭代变量 也可以自定义迭代变量(i,value)
<div id="div_each">
</div>
<script id="each" type="text/x-jquery-tmpl">
<h3>users</h3>
{{each(i,user) users}}
<div>${i+1}:{{= user.name}}</div>
{{if i==0}}
<h4>group</h4>
{{each(j,group) groups}}
<div>${group.name}</div>
{{/each}}
{{/if}}
{{/each}}
<h3>depart</h3>
{{each departs}}
<div>{{= $value.name}}</div>
{{/each}}
</script>
<script type="text/javascript">
var eachData = { users: [{ name: 'jerry' }, { name: 'john'}], groups: [{ name: 'mingdao' }, { name: 'meihua' }, { name: 'test'}], departs: [{ name: 'IT'}] };
$("#each").tmpl(eachData).appendTo('#div_each');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
输出结果
<div id="div_each">
<h3>users</h3>
<div>1:jerry</div>
<h4>group</h4>
<div>mingdao</div>
<div>meihua</div>
<div>test</div>
<div>2:john</div>
<h3>depart</h3>
<div>IT</div>
</div>
-------该标签{{each}} {{/each}}需要两两配合，其实就是each迭代器的用法{{each(i,data) datas}} i是序号，data是单个数据，datas是数据集合，两这中间要有个空格
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 示例3：
-----{{if }} {{else}}提供了分支逻辑相当于else if，参照js语法即可
<div id="div_ifelse"></div>
<script id="ifelse" type="text/x-jquery-tmpl">
{{each $data}}
<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>
{{/each}}
</script>
<script type="text/javascript">
var users = [{ ID: 'think8848', Name: 'Joseph Chan', Status: 1, App: 0 }, { ID: 'aCloud', Name: 'Mary Cheung', App: 1 }, { ID: 'bMingdao', Name: 'Jerry Jin'}];
$("#ifelse").tmpl(users).appendTo('#div_ifelse');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
输出结果
<div id="div_ifelse">
<div style="margin-bottom:10px;"><span>think8848</span><span style="margin-left:10px;">Joseph Chan</span>
<span>Status1</span> <span>App0</span>
</div>
<div style="margin-bottom:10px;"><span>aCloud</span><span style="margin-left:10px;">Mary Cheung</span>
<span>App1</span>
</div>
<div style="margin-bottom:10px;"><span>bMingdao</span><span style="margin-left:10px;">Jerry Jin</span>
</div>
</div>
-----$data 代表users对象
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 示例4：
-----{{html}} 输出变量html,但是没有html编码，适合输出html代码
<div id="div_html"></div>
<script id="html" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<div>${html}</div>
<div>{{html html}}</div>
</div>
</script>
<script type="text/javascript">
var user = { html: '<button>html</button>' };
$("#html").tmpl(user).appendTo('#div_html');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
输出结果
<div id="div_html"> <div><button>html</button></div>
<div><button>html</button></div></div>
-----使用此字段注意{{html 变量}}中间也是一个空格
1
2
3
2
3
# 示例5
-------{{tmpl}} 嵌套模版
<div id="tmpl"></div>
<script id="tmpl1" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${ID}</span>
<span style="margin-left:10px;">{{tmpl(Arr) '#tmpl2'}}</span>
</div>
</script>
<script id="tmpl2" type="type/x-jquery-tmpl">
{{each(i,item) List}}
${item.Name}
{{/each}}
</script>
<script type="text/javascript">
var users = { ID: 'think8848', Arr: [ID:'1111',List: [{Name:'Joseph'},{ Name:'Chan'}]] };
$("#tmpl1").tmpl(users).appendTo('#tmpl');
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
输出结果：
<div id="tmpl"> <div style="margin-bottom:10px;"> <span>think8848</span>
<span style="margin-left:10px;">JosephChan</span> </div> </div>
-------同理{{tmpl(数据源) '模板选择器'}}
1
2
3
2
3
# 示例6
,包装器
<div id="wrapDemo">
</div>
<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">
$(function () {
$('#myTmpl').tmpl().appendTo('#wrapDemo');
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
输出结果
# 示例7
$data $item ：$item代表当前的模板；$data代表当前的数据。
<div id="div_item_data"></div>
<script id="item_data" type="text/x-jquery-tmpl">
<div style="margin-bottom:10px;">
<span>${$data.ID}</span>
<span style="margin-left:10px;">${$item.getName(" ")}</span>
</div>
</script>
<script type="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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
输出结果：
<div id="div_item_data"> <div style="margin-bottom:10px;">
<span>think8848</span>
<span style="margin-left:10px;">Joseph Chan</span>
</div>
<div style="margin-bottom:10px;">
<span>aCloud</span>
<span style="margin-left:10px;">Mary Cheung</span>
</div>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 示例8
--------$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，即从渲染的html中拿出数据
<script type="text/javascript">
$('#demo').delegate('div', 'click', function () {
var item = $.tmplItem(this);
alert(item.data.Name);
});
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 示例9
-------$.template 函数
<script type="text/x-jquery-tmpl" id="tmpl01">
<h1>{{= name}}</h1>
<h1>${id}</h1>
<h1>${$item.getName(" ")}</h1>
<h1>${$data.id}</h1>
</script>
<script type="text/javascript">
$(function () {
var data = { id: '2', name: '2222' };
//template函数可以定义模板
$.template("movieTemplate", $('#tmpl01'));
$.tmpl('movieTemplate', data).appendTo($('#test02'));
})
</script>
<div id="test02"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 其它资料
jQuery-tmpl模板引擎使用详解 (opens new window)
jquery tmpl 详解 (opens new window)
# 熟练了解后就能轻松构建各种vue源码的生成。
上次更新: 2023/10/17, 11:18:49