JS模板引擎jTemplates 使用笔记（一）

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 运行效果图