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

　　输出结果如下：

　　

TrimPath - Js模板引擎的更多相关文章

  1. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  2. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  3. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  5. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  6. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  7. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  8. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  9. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

随机推荐

  1. Android通过HTTP协议实现上传文件数据

    SocketHttpRequester.java package cn.itcast.utils; import java.io.BufferedReader; import java.io.Byte ...

  2. mysql 增量导入到elasticsearch

    <pre name="code" class="html">zjtest7-redis:/odbc_es# cat /odbc_es/run_mys ...

  3. yum 配置详解（转发）

    一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的 ...

  4. 详解JavaScript中的Object对象

    Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...

  5. linux环境下java读取sh脚本并执行

    Process process;           String cmd = "/home/ty/t.sh";//这里必须要给文件赋权限 chmod u+x fileName; ...

  6. java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]

    此方法为Timestamp的 转换方法. 这几天做到excel导入功能,其中里面有几个时间时段,所以用了这个类来将导入的字符串格式转换Timestamp格式. 不慎出现了 java.lang.Ille ...

  7. hdu 3635 Dragon Balls（并查集应用）

    Problem Description Five hundred years later, the number of dragon balls will increase unexpectedly, ...

  8. python学习之路-6 冒泡算法、递归、反射、os/sys模块详解

    算法 冒泡算法 # 冒泡算法就是将需要排序的元素看作是一个个"气泡",最小的"气泡"最先浮出水面,排在最前面.从小到大依次排列. # 代码如下: li = [9 ...

  9. New Year Table（几何）

    New Year Table Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Sub ...

  10. android 推断Apk是否签名和 签名是否一致

    推断Apk是否签名 用命令:jarsigner -verify -verbose -certs <apk文件> 假设有Android Debug字樣就是debug 假设已经签名: [证书的 ...