当页面中引用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. java.lang.IllegalStateException at org.apache.catalina.connector.ResponseFacade

    2012-10-4 19:50:37 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() for se ...

  2. linux下面测试网络带宽 （转载）

    利用bmon/nload/iftop/vnstat/iptraf实时查看网络带宽状况 一.添加yum源方便安装bmon# rpm -Uhv http://apt.sw.be/redhat/el5/en ...

  3. 《Java程序员面试笔试宝典》之 什么是AOP

    AOP(Aspect-Oriented Programming,面向切面编程)是对面向对象开发的一种补充,它允许开发人员在不改变原来模型的基础上动态地修改模型从而满足新的需求.例如,在不改变原来业务逻 ...

  4. 数据分析系统DIY3/3：本地64位WIN7+matlab 2012b訪问VMware CentOS7+MariaDB

    数据分析系统DIY中要完毕的三个任务. 一.用VMware装64位CentOS.数据库服务端用CentOS自带的就好. 二.数据採集与预处理用Dev-C++编程解决. 三.用本地Win7 64上的MA ...

  5. [转]Laravel 4之请求

    Laravel 4之请求 http://dingjiannan.com/2013/laravel-request/ 获取请求数据 获取当前请求所包括的所有GET和POST数据 Route::get(' ...

  6. 该如何关闭thinkphp的缓存呢？有下面几种方法可参考：

    该如何关闭thinkphp的缓存呢?有下面几种方法可参考: (1)在配置文件中关闭缓存 在你的配置文件config.php文件中加上如下两句:   复制代码代码如下: 'TMPL_CACHE_ON'  ...

  7. vim 快捷键大全

    一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ctrl + f,向上翻页ctrl + b 3.向下翻半页ctrl + d,向上翻半页ctrl + u 4.移动到行尾$,移动到行首0(数 ...

  8. Android防止内存泄漏以及MAT的使用

    Android发生内存泄漏最普遍的一种情况就是长期保持对Context,特别是Activity的引用,使得Activity无法被销毁.这也就意味着Activity中所有的成员变量也没办法销毁.本文仅介 ...

  9. js中退出语句break,continue和return 比较（转）

    原链接:http://blog.163.com/ued_er/blog/static/199703159201210283107315/ js中退出语句break,continue和return 比较 ...

  10. asp.net 页面上传文件控件后台代码Request.Files获取不到

    今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...