當頁面中引用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 onchange="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>
輸出結果如下：
以上就是本文的全部內容，希望對大家有所協助，謝謝對雲棲社區的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
