1 引擎简介
jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现,可以配合AJAX,JSON一起协同工作,模板内容可以用JS代码,实现了活动更新,可以自动从服务器更新模板生成的内容。
jTemplates能免费应用于商业和非商业。
2 下载引用
最新版本号:0.7.8
示例包:http://jtemplates.tpython.com/jTemplates.zip
压缩后:http://jtemplates.tpython.com/jTemplates/jquery-jtemplates.js
未压缩:http://jtemplates.tpython.com/jTemplates/jquery-jtemplates_uncompressed.js
3 简单示例
本Demo使用MVC框架搭建。
I:使用*.ASCX搭建模板内容
主要代码
{#template MAIN}
<div id="header">{$T.Name}</div>
<table>
{#foreach $T.Peoples as record}
{#include ROW root=$T.record}
{#/for}
</table>
{#/template MAIN}
{#template ROW}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
<td>{$T.FirstName.bold()}</td>
<td>{$T.Age}</td>
<td>{$T.Email.link('mailto:'+$T.Email)}</td>
</tr>
{#/template ROW}
II: 使用*.Aspx搭建展示页面
主要代码
<script src="<%=Url.Content("~/Scripts/jquery-jtemplates.js")%>"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type:"POST",
url: "<%= Url.Action("GetData") %>",
data: "",
contentType: "application/json; charset=utf-8",
cache:false,
dataType: "json",
success: function(data){
if(data){
$("#jTemplateDemo").setTemplateURL("<%=Url.Action("GetTemplate")%>");
$("#jTemplateDemo").processTemplate(data);
}
}
});
});
</script>
<div id="jTemplateDemo"></div>
III:Action和Model
Action主要代码
public ActionResult Index(string id)
{
return View();
}
/// <summary>
/// Request for template content
/// </summary>
/// <returns>templates</returns>
public ActionResult GetTemplate()
{
return PartialView("TableTemp");
}
/// <summary>
/// Request for temp data
/// </summary>
/// <returns>temp data</returns>
[HttpPost]
public ActionResult GetData()
{
var model = new TempModel{
Name = "New Employees",
Peoples = new List
{
new Person {ID = "1", FirstName = "Anne", Email = "anne@domain.com",Age=20},
new Person {ID = "2", FirstName = "Amelie", Email = "amelie@domain.com",Age=22},
new Person {ID = "3", FirstName = "Polly", Email = "polly@domain.com",Age=35},
new Person {ID = "4", FirstName = "Alice", Email = "alice@domain.com",Age=27},
new Person {ID = "5", FirstName = "Martha", Email = "martha@domain.com",Age=32}
}
};
return Json(model);
}
Model主要代码
public class Person
{
public string ID { get; set; }
public string FirstName { get; set; }
public string Email { get; set; }
public int Age { get; set; }
}
public class TempModel
{
public string Name { get; set; }
public List<Person> Peoples { get; set; }
}
3 运行效果图