jquery.tmpl 基础用法

大家好，又见面了，我是你们的朋友全栈君。

jQuer.tmpl

通过动态请求返回数据时通过HTML显示到页面快速便捷实用的方法。只需要在预先定义好一个模板在动态数据返回后调用jQuery对应实现的方法即可对HTML进行拼接同时显示出来。并且定义模板时可以使用一些逻辑判断的标签。
个人认为jQuer.tmpl有个不好的地方就是没有错误提示；例如在使用标签进行判断时可能有个地方字段写错的但是没有提示需要花一点时间去找问题，那就会有一些苦恼。

jQuery.tmpl的几种常用标签分别有：
${动态数据字段名}, {
{each}}, {
{if}}, {
{else}}
在jsp中使用标签时是需要在${}前加上”\”(\${})，是因为标签的使用格式与el表达式发生冲突。
下面就来介绍一下jQuer.tmpl的一些基本用法：
首先需要引入一下jQuery脚本与jQuery.tmpl脚本

示例1：${}

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
	  <td>${id}</td>
	  <td>${name}</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三"},{id:2,name:"李四"}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

示例2：{
{if}} {
{else}} {
{/if}} 这里的if else 有些不同于JavaScript中的(if else)用法而类似于(if() else if())

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
		{
  
  {if ${id == 1}}}
		  <td style="color:gules">${id}</td>
		{
  
  {else ${id == 2}}}
		  <td style="color:yellow">${id}</td>
		{
  
  {else}}
		  <td>${id}</td>
		{
  
  {/if}}
	    <td>${name}</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三"},{id:2,name:"李四"},{id:3,name:"李四"}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

示例3：{
{each}} 用于循环 {
{each(j,major) majors}}{
{/each}} majors循环的数组，major表示对象，j表示索引（从0开始）

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		  <th>专业</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
		<td>${id}</td>
	    <td>${name}</td>
		<td>
		{
  
  {each(i,major) majors}}
			${major.name}
		{
  
  {/each}}
		</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三",majors:[{name:"英语"},{name:"数学"}]},{id:2,name:"李四",majors:[{name:"语文"},{name:"数学"}]},{id:3,name:"李四",majors:[{name:"政治"},{name:"数学"}]}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

以上jquer.tmpl的一些基础用法，如果有什么不对的地方还请大神指出。