当页面中引用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 οnchange="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>
输出结果如下: