当页面中引用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. Check iO：初学Python

    The end of other For language training our Robots want to learn about suffixes. In this task, you ar ...

  2. logstash 字段类型转换后 需要刷新

    filter { grok { match => [ "message" , "\s*%{IPORHOST:clientip}\s+\-\s+\-\s+\[%{HT ...

  3. C5-信号量与PV操作(iOS篇-细说信号量)

    一.概述 信号量这种同步机制的概念. P, V操作(Dijkstra提出)的定义 github地址(iOS中的信号量是以1开始定义): https://github.com/sixleaves/sem ...

  4. 简述tcp协议对http性能的影响及优化

    当网站服务器并发连接达到一定程度时,你可能需要考虑服务器系统中tcp协议设置对http服务器的影响. tcp相关延时主要包括: 1.tcp连接时建立握手: 2.tcp慢启动拥塞控制: 3.数据聚集的N ...

  5. flex渐变色制作圆角橙色按钮

    <?xml version="1.0" encoding="utf-8"?> <s:SparkButtonSkin xmlns:fx=&quo ...

  6. Android使用bindService启动服务

    1.Service package com.example.ebobo; import java.util.Timer; import java.util.TimerTask; import andr ...

  7. poj 3669 Meteor Shower（bfs）

    Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteo ...

  8. freemarker报错之三

    1.错误描写叙述 Expression students is undefined on line 30, column 24 in student.ftl. The problematic inst ...

  9. redis安装配置和使用;tomcat安装和使用

    virtualbox主要有以下几种方式(不同版本号称法不一样,但实质是一样的): 1.Intelnal Network:利用主机上的全部的虚拟机构建一个虚拟网络 2.NAT:能訪问互联网,不能訪问主机 ...

  10. CI分支kohana在线文档

    http://www.luzhongpeng.com/guide/kohana/mvc/controllers http://www.lampblog.net/kohana3%E4%BD%BF%E7% ...