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

1 引擎简介

jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。
jTemplates能免费应用于商业和非商业。

2 下载引用

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<person>
    {
        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);
}</person>

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; }
 
}