詳解Js模板引擎（TrimPath）
當(dāng)頁(yè)面中引用template.js文件之后，腳本將創(chuàng)建一個(gè)TrimPath對(duì)象供你使用。
parseDOMTemplate(elementId,optionalDocument) //獲得模板字符串代碼
得到頁(yè)面中Id為elementId的DOM組件的InnerHTML，將其解析成一個(gè)模板，這個(gè)返回一個(gè)templateObject對(duì)象，解析出錯(cuò)時(shí)將拋出一個(gè)異常。
optionalDocument一個(gè)可選參數(shù)，在使用iframe,frameset或者默認(rèn)多文檔時(shí)會(huì)有用，通常用來(lái)做模板的DOM元素師一個(gè)隱藏的<textarea>。
以上方法的到的模板(字符串)再經(jīng)過(guò)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)過(guò)解析后生成的代碼。
其作用相當(dāng)于parseDOMTemplate().process()，即從textarea讀取模板后替換數(shù)據(jù)。
先來(lái)看一個(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>
以上代碼在頁(yè)面上輸出：關(guān)云長(zhǎng)敗走麥城!
其實(shí)，這個(gè)東西與C#，PHP的模板引擎，并沒(méi)有本質(zhì)上的區(qū)別，都是讀入模板，然后替換數(shù)據(jù)。只不過(guò)，C#與PHP等后臺(tái)語(yǔ)言，一般都從文件里面讀取模板，如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: "臥龍光線(xiàn)", },
]; //他媽的for循環(huán)多了一次
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>
語(yǔ)法結(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ā)，并且此處的注釋沒(méi)影響
}
{/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)程序再來(lá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)文章
php類(lèi)中static與self的使用區(qū)別淺析
在閱讀一些框架的源碼時(shí)發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來(lái)查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關(guān)于php類(lèi)中static與self的使用區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-06-06
javascript頁(yè)面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多，本文為大家介紹下使用javascript的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
js中獲取鍵盤(pán)事件的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js中獲取鍵盤(pán)事件的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JavaScript監(jiān)聽(tīng)和禁用瀏覽器回車(chē)事件實(shí)例
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)和禁用瀏覽器回車(chē)事件實(shí)例,本文直接給出示例代碼,需要的朋友可以參考下2015-01-01
返回對(duì)象在當(dāng)前級(jí)別中是第幾個(gè)元素的實(shí)現(xiàn)代碼
我就是想怎么獲取 每個(gè)層 相對(duì)于父級(jí)層 是第幾個(gè)，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了分析JavaScript中this引發(fā)的bug以及相關(guān)的處理方法分析，一起學(xué)習(xí)下吧。2017-12-12
收藏，對(duì)比功能的JS部分實(shí)現(xiàn)代碼
非常不錯(cuò)的，收藏效果代碼，增加當(dāng)前頁(yè)的現(xiàn)實(shí)，實(shí)現(xiàn)對(duì)比2008-08-08
JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的解決方案,需要的朋友可以參考下2017-04-04
js實(shí)現(xiàn)倒計(jì)時(shí)時(shí)鐘的示例代碼
本篇文章主要是對(duì)js倒計(jì)時(shí)時(shí)鐘的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12