Js模板引擎 TrimPath

来源：互联网发布：淘宝摄影棚用什镜头编辑：程序博客网时间：2024/05/18 18:02

当页面中引用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>

阅读全文

0 0