使用jquery html模板对Json数据进行组合显示
在Ajax提交之后，我们一般返回的数据形式大多数都是返回的是Json 数据回来，然后结合美工提供的html把Json进行组合。
问题就出在这里，当html代码短少时，问题不大，但是一旦内容过多，那么此时问题就暴露出来了。
下面贴一张相关的代码图片，瞧瞧是如此的犀利。
此时的你是不是已经蛋疼了呢？
不管你疼不疼，我反正是疼了。gan！
先不说里面的json元素使用情况，单单是里面的双引号嵌套单引号，就让人为之疯狂了。
那么接下来，将介绍关于Jquery中一款关于HMTL模板的插件
jquery.tmpl.js --22.2KB
jquery.tmpl.min.js --5.97KB
看一个Demo
html 代码
<body>
<form id="form1" runat="server">
<div>
<ul id="ulContent">
<li>
我的ID:<label>1</label><br/>
我的年龄:<label>22</label><br/>
我的姓名:<label>abcd</label><br/>
我的性别:<label>男</label><br/>
</li>
</ul>
<br/>
<input type="button" value="测试一下" id="btnSure" />
</div>
</form>
</body>
那么进行Ajax 提交之后，返回更新的内容是 整个<li>标签的内容，所以我们将对这段<li>标签的内容进行模板化。
<script id="TemplateStudent" type="text/x-jquery-tmpl">
<li>
我的ID:<label>${Id}</label><br/>
我的年龄:<label >${Age}</label><br/>
我的姓名:<label>${Name}</label><br/>
我的性别:<label>${Sex}</label><br/>
<input type="button" value="点击我" id="btnId${Id}" onclick="fashionB(${Id});"/>
</li>
</script>
当然还有这种写法<label >{{= Age}}</label><br/> 注意=等号后面的变量名不能紧挨，否则将不能识别<br/>
还有就是对应的JS调用情况了
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
function fashionB(id) {
alert(id);
}
$(document).ready(function () {
$("#btnSure").click(function () {
$.post("Demo", {}, function (result, resultState) {
if (resultState == "success") {
var resultJson = eval(result);
//TemplateStudent
$("#ulContent").html($("#TemplateStudent").tmpl(resultJson));
}
});
});
});
</script>
在$("#ulContent").html($("#TemplateStudent").tmpl(resultJson));这段代码中$("#TemplateStudent")这个就是我们用Script标签包裹的html模板ID。把返回的Json数据作为参数tmpl()函数当中，剩下的事情就交给我们定义好的模板了。
（小提示，模板的里面的属性标记，必须要与你后台 类 属性一致）
大家在看模板的时候，可能已经注意到这个script标签的type属性了，text/x-jquery-tmpl ，但是我推荐大家使用这种方式 type="text/html"，而不是上面那种，至于为什么，你自己动手试一下就知道了。之前的介绍，只是jquery.tmpl.js 最简单的使用方式，当然还有其他针对我们平常遇到的情况解决方案。
第二种使用方式
比如说在描述一个学生信息时，可能要把他的性别罗列出来，那么我们在设计数据库时，上面那些人如果用char类型还好，直接写入男女，但是可能是 bit 也有可能是int ，那么我们在读取之后，在组合json时，就要写if条件判断了。
我的性别:
{{if Sex==0}}
<label class='sex${colorSex(Sex)}'>男</label>
{{else}}
<label class='sex${colorSex(Sex)}'>女</label>
{{/if}}<br/>
0为男，1为女 这就是关于在模板中加入if逻辑的使用，还有就是在<label>标签中在class属性中也使用了模板标记
那么这个标记中也加入了我们js函数在配合模板使用.
Css
<style type="text/css">
.sexBoy{ color:Blue;}
.sexGirl{ color:Red;}
</style>
JS
function colorSex(sex) {
return sex == 0 ? "Boy" : "Girl";
}
这个小功能主要是区分男女颜色各不同。
第三种使用方式。
在说之前，相信大家对Jquery中的each函数不陌生，接下来我们要介绍的就是在模板中使用each
为了配合这种使用方式我们在后台类中加入一个属性，
/// <summary>
/// 我的标签
/// </summary>
public string[] Label { get; set; }
后台handler
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
/// <summary>
///DemoHander 的摘要说明
/// </summary>
public class DemoHander:IHttpHandler
{
public DemoHander()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
public bool IsReusable
{
get { return false; }
}
public void ProcessRequest(HttpContext context)
{
IList<Student> stu = new List<Student>()
{
new Student(){ Id=1, Age=2, Sex=0, Name="嘻嘻",Label=new string[]{"y","z","a"}},
new Student(){ Id=2, Age=2,Sex=0, Name="嘻嘻",Label=new string[]{"y","z"}},
new Student(){ Id=3, Age=2,Sex=1, Name="嘻嘻",Label=new string[]{"y","z"}},
new Student(){ Id=4, Age=2, Sex=1,Name="嘻嘻",Label=new string[]{"y","z","a"}},
new Student(){ Id=5, Age=2,Sex=1, Name="嘻嘻",Label=new string[]{"y","z","a"}},
new Student(){ Id=6, Age=2,Sex=0, Name="嘻嘻",Label=new string[]{"y","z"}},
new Student(){ Id=7, Age=2,Sex=0, Name="嘻嘻",Label=new string[]{"y","z"}},
new Student(){ Id=8, Age=2, Sex=0,Name="嘻嘻",Label=new string[]{"y","z","a"}}
};
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(stu));
}
}
对应html模板为:
<script id="TemplateStudent" type="text/html">
<li>
我的ID:<label>${Id}</label><br/>
我的年龄:<label >{{= Age}}</label><br/> 注意=等号后面的变量名不能紧挨，否则将不能识别<br/>
我的姓名:<label>${Name}</label><br/>
我的性别:{{if Sex==0}}<label class='sex${colorSex(Sex)}'>男</label>{{else}}<label class='sex${colorSex(Sex)}'>女</label>{{/if}}<br/>
我的标签是:
{{each(indexs,values) Label}}
<label>${values} </label>
{{/each}}
一共有${Label.length}个标签<br/>
<input type="button" value="点击我" id="btnId${Id}" onclick="fashionB(${Id});"/>
</li>
</script>
这就是配合使用each的方式来做了，此时如果你已经在你的电脑上面使用了这个each，你会发现其中有点小问题，就是这几个标签会紧挨着一起，可能你会在 <label>${values} </label>后面加上一个 ,OK ，这样你认为没有问题了。看起来也很清楚了，但是可不代表其他人看起爽，让你再后面用逗号进行分割，此时你还可以接受，把 换成 , ，但是一个新的问题出来了，每个<label>标签后面，永远是多了一个逗号，此时的你，遇到这种情况的话，就要在这个each里面加上if条件判断了，就是要处理这个多了一个逗号的问题.
{{each(indexs,values) Label}}
{{if indexs!=Label.length-1}}
<label>${values}, </label>
{{else}}
<label>${values} </label>
{{/if}}
{{/each}}
一共有${Label.length}个标签<br/>
问题解决了。
第四种方式（模板复用）：
我们要把这个“我的标签”部分提取出来。单独声明一个<script> 标签进行装载
<script type="text/html" id="TemplateStudent2">
我的标签是:
{{each(indexs,values) Label}}
{{if indexs!=Label.length-1}}
<label>${values}, </label>
{{else}}
<label>${values} </label>
{{/if}}
{{/each}}
一共有${Label.length}个标签<br/>
</script>
然后这里为了配合使用模板复合方式，我们要在之前的模板中改变一点点内容.
<script id="TemplateStudent" type="text/html">
<li>
我的ID:<label>${Id}</label><br/>
我的年龄:<label >{{= Age}}</label><br/> 注意=等号后面的变量名不能紧挨，否则将不能识别<br/>
我的姓名:<label>${Name}</label><br/>
我的性别:{{if Sex==0}}<label class='sex${colorSex(Sex)}'>男</label>{{else}}<label class='sex${colorSex(Sex)}'>女</label>{{/if}}<br/>
直接使用调用第二个模板，分离开来<br/>
{{tmpl '#TemplateStudent2'}}
<hr/>
<input type="button" value="点击我" id="btnId${Id}" onclick="fashionB(${Id});"/>
</li>
</script>
{{tmpl '#TemplateStudent2'}} 中的tmpl关键字，是特定的，不能随意书写。后面则加在我们提取出来的第二个模板的ID
------------------------------------------------------------------------------------------------------
除了上述四种常用方式外，还有几种使用方式。在这里我就不一一列举了，因为我介绍的只是针对于Ajax提交之后的进行组合Json来使用这个模板插件。
当然也可以单独是用这个插件，不在Ajax提交之后也可以。
此时的你，还蛋疼吗？
不管你疼不疼，反正我是不疼了。
