詳解Js模板引擎（TrimPath）

2019-11-19 18:52:44

字體：大中小

來源：轉載

供稿：網友

當頁面中引用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>

輸出結果如下：