當頁面中引用template.js文件之后，腳本將創建一個TrimPath對象供你使用。
parseDOMTemplate(elementId,optionalDocument) //獲得模板字符串代碼
得到頁面中Id為elementId的DOM組件的InnerHTML，將其解析成一個模板，這個返回一個templateObject對象，解析出錯時將拋出一個異常。
optionalDocument一個可選參數，在使用iframe,frameset或者默認多文檔時會有用，通常用來做模板的DOM元素師一個隱藏的<textarea>。
以上方法的到的模板(字符串)再經過process()方法進一步解析就得到了最終的源代碼。
如:
var result = parseDOMTemplate(elementId,optionalDocument).process(); //用數據替換模板
這個方法也直接能用于解析字符串:
var data = { Name:"張遼" }; //不輸入就包ul，輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
alert("hello ${Name}".process(data)); //process()就是一個將數據解析模板的函數，這里輸出hello,張遼 一步到位的方法：
TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)
這是一個輔助函數，內部調用TrimPath.parseDOMTemplate()和Process()方法結果就是經過解析后生成的代碼。
其作用相當于parseDOMTemplate().process()，即從textarea讀取模板后替換數據。
先來看一個最簡單的例子：
<html> <head> <title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script></head>
<body> <div id="ShowDiv"> </div> <textarea id="temp" style="display:none;"> ${Name}敗走麥城!</textarea>
</body>
</html>
<script language="javascript">var data = { Name: "關云長" };var result = TrimPath.processDOMTemplate("temp", data);document.getElementById("ShowDiv").innerHTML = result;
</script> 以上代碼在頁面上輸出：關云長敗走麥城!
其實，這個東西與C#，PHP的模板引擎，并沒有本質上的區別，都是讀入模板，然后替換數據。只不過，C#與PHP等后臺語言，一般都從文件里面讀取模板，如Html,txt等。而TrimPath就從<textarea></textarea>標簽上讀取模板。
條件控制示例(if () else())：
<html> <head> <title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script></head>
<body> <div id="ShowDiv"> </div> <textarea id="temp" style="display:none;"> {if Name == "關云長"}${Name}龍卷旋風斬!{elseif Name == "郭嘉"}${Name}冰河爆裂破!{else}${Name}放大!{/if}</textarea>
</body>
</html>
<script language="javascript">
var data = { Name: "郭嘉" };
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script> 循環控制(for forelse /for):
<html>
<head><title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body><div id="ShowDiv"></div><textarea id="temp" style="display: none;"> <table width="400" cellspacing="0" cellpadding="0" border="1">{for i in data}<tr><td>${i.Name}</td><td>${i.Big}</td></tr>{/for}</table></textarea>
</body>
</html><script type="text/javascript">
var data = [
{ Name: "關羽", Big: "龍卷旋風斬" },
{ Name: "郭嘉", Big: "冰河爆裂破" },
{ Name: "諸葛", Big: "臥龍光線", },
]; //他媽的for循環多了一次
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script> 語法結構如下：
{for varName in listExpr}
主循環體
{forelse}
當輸入為null，或listExpr數量為0時
{/for} 宏定義：
<html>
<head><title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body><div id="ShowDiv"></div><textarea id="temp" style="display: none;"> {macro htmlList(list, optionalListType)}{var listType = optionalListType != null ? optionalListType : "ul"}<${listType}>{for item in list}<li>${item}</li>{/for}</${listType}>{/macro}${htmlList(["AA","BB","CC"], "")}</textarea>
</body>
</html><script type="text/javascript">
var data = {}; //不輸入就包ul，輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script> CDATA區域：
<html>
<head>
<title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body><div id="ShowDiv"></div><textarea id="temp" style="display: none;"> {cdata}${Name}{/cdata} 被解釋成了 ${Name}</textarea>
</body>
</html>
<script type="text/javascript">
var data = { Name:"張遼" }; //不輸入就包ul，輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script> 內聯js：
<html>
<head><title>TrimPath學習測試</title><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body><div id="ShowDiv"></div><textarea id="temp" style="display: none;"> <select οnchange="sel_onchange()"><option value="1">1</option><option value="2">2</option></select>{eval}sel_onchange = function() {alert('我不小心被change了'); //此js事件會被觸發，并且此處的注釋沒影響}{/eval}</textarea>
</body>
</html><script type="text/javascript">
var data = { Name:"張遼" }; //不輸入就包ul，輸入就包你輸入的那個
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script> 結合.Net MVC后臺程序再來一把：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;namespace 測試jQuery_EasyUI.Controllers
{[HandleError]public class HomeController : Controller{public ActionResult Index(){return View();}public ActionResult GetJson(){Person p1 = new Person(1, "劉備", 30);Person p2 = new Person(2, "關羽", 28);Person p3 = new Person(3, "張飛", 36);List<Person> ListPerson = new List<Person>();ListPerson.Add(p1);ListPerson.Add(p2);ListPerson.Add(p3);return Json(ListPerson,JsonRequestBehavior.AllowGet);}}public class Person{public Person(int id, string name, int age) { Id = id; Name = name; Age = age; }public int Id { get; set; }public string Name { get; set; }public int Age { get; set; }}
} 前臺代碼：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><html>
<head><title>TrimPath學習測試</title><script src="../../Scripts/jquery.min.js" type="text/javascript"></script><script src="../../Scripts/trimpath/template.js" type="text/javascript"></script></head>
<body><div id="ShowDiv"></div><textarea id="temp" style="display: none;"> <table width="400" cellspacing="0" cellpadding="0" border="1"><tr><td>Id</td><td>姓名</td><td>年齡</td></tr>{for i in data}<tr><td>${i.Id}</td><td>${i.Name}</td><td>${i.Age}</td></tr>{/for}</table></textarea>
</body>
</html><script type="text/javascript">var data;$(function() {$.ajax({url: "/Home/GetJson",type: 'post',async: true,dataType: 'json',success: function(response) {data = response;var result = TrimPath.processDOMTemplate("temp", data);document.getElementById("ShowDiv").innerHTML = result;}})})
</script> 輸出結果如下：
組件開發)
)