jquery.tmpl的使用

jquery.tmpl是jQuery模板插件,http://plugins.jquery.com/tmpl/ （另外还有一个插件dot.js，不依赖与jquery,性能更佳，使用方法大同小异）

在网页中大量使用异步请求数据来更新页面内容非常常见，异步请求返回的内容一般是表现为json格式的数据，因为HTML结构的复杂性，我们在没有使用任何工具下要将json表现格式的数据生成HTML是非常繁琐的，而且容易出错，不好维护。因此通过jquery.tmpl和定义HTML模板可以轻松很多，更利于维护。

Tmpl提供了几种tag：

1, ${}：等同于{{=}}，是输出变量，通过了html编码的。

2, {{html}}:输出变量html,但是没有html编码，适合输出html代码。

3, {{if }} {{else}}:提供了分支逻辑。

4, {{each}}:提供循环逻辑，$value访问迭代变量。

基本使用

1，首先我们需要引用jquery.js和jquery.tmpl.js

2，定义一个模板

3，调用tmpl()方法：$("模板ID").tmpl(data);

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title> 
 </head>
<style type="text/css">
#list li {
  padding: 8px 0;
  line-height: 1.8em;
  list-style-type: decimal;
}
</style>
 <body>
   <ul id="list"></ul>
 </body>
</html>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='jquery.tmpl.js'></script>
<!--定义一个User模板-->
<script type="text/template" id='UserTmpl'>
    <li>      
        <span>${NickName}</span>
	<span>${Age}</span>
        <span>${Gender}<span>
    </li>
</script>
<script type="text/javascript">
	var users=[{ID:"0001",NickName:"小白",Gender:false,Age:18},{ID:"0001",NickName:"小黑",Gender:true,Age:20}];
	$("#list").append($("#UserTmpl").tmpl(users));
</script>

{{if }} {{else}}的使用

明显对于性别Gender属性需要使用到{{if}}和{{else}}了

修改一下模板 {{if}}后面加的就是符合if里面条件后要输出的HTML, 使用{{if}}需要有结束标记{{/if}}

 <li>      
        <span>${NickName}</span>
	<span>${Age}</span>
	{{if Gender}}
	<span>男</span>
	{{else}}
	<span>女</span>
	{{/if}}
</li>

{{each}}使用

<script id="each" type="text/x-jquery-tmpl"> 
    <li>
	   <span>${Title}</span>
	   <span>Languages:</span>
	   <ul>
	      {{each Languages}}
		  <li>${$value.Name}</li>
		  {{/each}}
	   <ul>
	</li>
</script> 
<script type="text/javascript">
　　  var movies = [{Title: "Meet Joe Black", Languages: [{ Name: "English" },{ Name: "French" }]}];  
　　$("#each").tmpl(movies).appendTo('#div_each');
</script>

posted @ 2015-03-27 11:25 10:00 阅读(3042) 评论(0) 收藏举报

刷新页面返回顶部