詳解Js模板引擎(TrimPath)
當(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)云長" }; var result = TrimPath.processDOMTemplate("temp", data); document.getElementById("ShowDiv").innerHTML = result; </script>
以上代碼在頁面上輸出:關(guān)云長敗走麥城!
其實(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)云長"} ${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 onchange="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é)果如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家有所幫助,謝謝對(duì)腳本之家的支持!
相關(guān)文章
javascript頁面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁面動(dòng)態(tài)顯示時(shí)間變化的方法有很多,本文為大家介紹下使用javascript的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過2013-12-12js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07js中獲取鍵盤事件的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s中獲取鍵盤事件的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽和禁用瀏覽器回車事件實(shí)例,本文直接給出示例代碼,需要的朋友可以參考下2015-01-01返回對(duì)象在當(dāng)前級(jí)別中是第幾個(gè)元素的實(shí)現(xiàn)代碼
我就是想怎么獲取 每個(gè)層 相對(duì)于父級(jí)層 是第幾個(gè),需要的朋友可以參考下。2011-01-01收藏,對(duì)比功能的JS部分實(shí)現(xiàn)代碼
非常不錯(cuò)的,收藏效果代碼,增加當(dāng)前頁的現(xiàn)實(shí),實(shí)現(xiàn)對(duì)比2008-08-08JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽輸入框變化的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽輸入框變化的解決方案,需要的朋友可以參考下2017-04-04js實(shí)現(xiàn)倒計(jì)時(shí)時(shí)鐘的示例代碼
本篇文章主要是對(duì)js倒計(jì)時(shí)時(shí)鐘的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12