TrimPath - Js模板引擎

当页面中引用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模板引擎的更多相关文章

JST(JavaScript Trimpath)前端模板引擎简介
JST(JavaScript Trimpath)前端模板引擎简介及应用今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...
js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

随机推荐

BZOJ 2436 NOI嘉年华(单调优化)
http://www.lydsy.com/JudgeOnline/problem.php?id=2436 题意:两个会场不能同时表演,但是同一个时间可以同时表演,要求让两个会场表演数量最小的最大,然后 ...
HDU 2222 Keywords Search (AC自动机)
题意:就是求目标串中出现了几个模式串. 思路:用int型的end数组记录出现,AC自动机即可. #include<iostream> #include<cstdio> #inc ...
《Programming WPF》翻译第8章 4.关键帧动画
原文:<Programming WPF>翻译第8章 4.关键帧动画到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...
制作安装包工具NSIS
NSIS 下载地址: http://nsis.sourceforge.net/Download 编辑工具:NIS Edit 下载地址: http://soft.hao123.com/soft/appi ...
mysql 中文配置（转）
Dos下连接mysql后,运行一下几项就可以插入中文了: SET character_set_client = gbk; SET character_set_connection = gbk; SET ...
java框架BeanUtils及路径问题练习
内省----->一个变态的反射 BeanUtils主要解决的问题: 把对象的属性数据封装到对象中. 使从文件中读取的数据往对象中赋值更加简单: BeanUtils的好处: 1. ...
Linux基本操作 2-----Linux文件系统基本结构
Linux的文件系统结构 Linux文件系统为一个倒转的单根树状结构文件系统的根为"/" 文件系统严格区分大小写路径使用“/”来分割,在windows使 ...
第04章-VTK基础（4）
[译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...
java第二周学习日记
day01 1.抽象类 (1)抽象类的应用场景: 我们在描述一类事物的时候,发现该种事物确实存在着某种行为,但是这种行为目前不是具体的,那么我们可以抽取这种行为的声明,但是不去实现该种行为,这时候这种 ...
Android编译过程详解（三）
前面两节讲解了自定义Android编译项和创建Product产品配置文件,除了编译和定义产品相关环境变量外,还需要定义Board相关环境变量. 1. build/core/config.mk 109 ...

TrimPath - Js模板引擎

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

随机推荐

热门专题