當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

TrimPath - Js模板引擎

發(fā)布時(shí)間：2024/4/14 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 TrimPath - Js模板引擎小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

　　當(dāng)頁面中引用template.js文件之后，腳本將創(chuàng)建一個(gè)TrimPath對(duì)象供你使用。

parseDOMTemplate(elementId,optionalDocument)　　//獲得模板字符串代碼

　　得到頁面中Id為elementId的DOM組件的InnerHTML，將其解析成一個(gè)模板，這個(gè)返回一個(gè)templateObject對(duì)象，解析出錯(cuò)時(shí)將拋出一個(gè)異常。
　　optionalDocument一個(gè)可選參數(shù)，在使用iframe,frameset或者默認(rèn)多文檔時(shí)會(huì)有用，通常用來做模板的DOM元素師一個(gè)隱藏的<textarea>。

　　以上方法的到的模板(字符串)再經(jīng)過process()方法進(jìn)一步解析就得到了最終的源代碼。
　　如:

var result = parseDOMTemplate(elementId,optionalDocument).process();　　//用數(shù)據(jù)替換模板

　　這個(gè)方法也直接能用于解析字符串:

var data = { Name:"張遼" }; 　　　　　　//不輸入就包ul，輸入就包你輸入的那個(gè) var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; alert("hello ${Name}".process(data)); //process()就是一個(gè)將數(shù)據(jù)解析模板的函數(shù)，這里輸出hello,張遼

　　一步到位的方法：

TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)

　　這是一個(gè)輔助函數(shù)，內(nèi)部調(diào)用TrimPath.parseDOMTemplate()和Process()方法結(jié)果就是經(jīng)過解析后生成的代碼。

　　其作用相當(dāng)于parseDOMTemplate().process()，即從textarea讀取模板后替換數(shù)據(jù)。

　　先來看一個(gè)最簡(jiǎn)單的例子：

<html> <head> <title>TrimPath學(xué)習(xí)測(cè)試</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: "關(guān)云長(zhǎng)" };var result = TrimPath.processDOMTemplate("temp", data);document.getElementById("ShowDiv").innerHTML = result; </script>

　　以上代碼在頁面上輸出：關(guān)云長(zhǎng)敗走麥城!

　　其實(shí)，這個(gè)東西與C#，PHP的模板引擎，并沒有本質(zhì)上的區(qū)別，都是讀入模板，然后替換數(shù)據(jù)。只不過，C#與PHP等后臺(tái)語言，一般都從文件里面讀取模板，如Html,txt等。而TrimPath就從<textarea></textarea>標(biāo)簽上讀取模板。

　　條件控制示例(if () else())：

<html> <head> <title>TrimPath學(xué)習(xí)測(cè)試</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 == "關(guān)云長(zhǎng)"}${Name}龍卷旋風(fēng)斬!{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>

　　循環(huán)控制(for forelse /for):

<html> <head><title>TrimPath學(xué)習(xí)測(cè)試</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: "關(guān)羽", Big: "龍卷旋風(fēng)斬" }, { Name: "郭嘉", Big: "冰河爆裂破" }, { Name: "諸葛", Big: "臥龍光線", }, ]; //他媽的for循環(huán)多了一次 var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; </script>

　　語法結(jié)構(gòu)如下：

{for varName in listExpr} 主循環(huán)體 {forelse} 當(dāng)輸入為null，或listExpr數(shù)量為0時(shí) {/for}

　　宏定義：

<html> <head><title>TrimPath學(xué)習(xí)測(cè)試</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，輸入就包你輸入的那個(gè) var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; </script>

　　CDATA區(qū)域：

<html> <head> <title>TrimPath學(xué)習(xí)測(cè)試</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，輸入就包你輸入的那個(gè) var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; </script>

　　內(nèi)聯(lián)js：

<html> <head><title>TrimPath學(xué)習(xí)測(cè)試</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事件會(huì)被觸發(fā)，并且此處的注釋沒影響}{/eval}</textarea> </body> </html><script type="text/javascript"> var data = { Name:"張遼" }; //不輸入就包ul，輸入就包你輸入的那個(gè) var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; </script>

　　結(jié)合.Net MVC后臺(tái)程序再來一把：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;namespace 測(cè)試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, "關(guān)羽", 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; }} }

　　前臺(tái)代碼：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><html> <head><title>TrimPath學(xué)習(xí)測(cè)試</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>

　　輸出結(jié)果如下：

轉(zhuǎn)載于:https://www.cnblogs.com/zhishaofei/p/4269300.html

總結(jié)

以上是生活随笔為你收集整理的TrimPath - Js模板引擎的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Two-stage rotation a
下一篇： ng-repeat 与ng-switch