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

JST(JavaScript Trimpath)前端模板引擎简介及应用

　　今天在做某系统日志列表的时候用到了这个玩意儿。刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情，晚上有空了才仔细去网上找了找对应的资料，细细的品味了一下。现在把应用总结下。

　　1、Trimpath简介

　　 Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。
　　它有如下的特点：
    　　 ①、采用标准的JavaScript编写，支持跨浏览器
    　　 ②、模板语法类似于：FreeMarker，Velocity,Smarty
    　　 ③、采用简易的语言来描述大段的字串以及Dom/DHTML操作
　　采用该引擎，可以让它来完全处理View方面的事情，服务端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处理，大大减少了服务器的负担，用来构建Ajax技术的网络信息系统应用是一个非常好的选择。

　　对应的官方网站是：https://code.google.com/p/trimpath/wiki/JavaScriptTemplates。今天到网站看了一下，貌似这个引擎已经很久没有更新过了，最新的内容也是2010年的东东。不过还好，用起来还算方便。

　　2、简单应用

　　废话不多说了，现在把简单的应用介绍一下：

　　①第一步在HTML页面安装template.js。如下：

1 <html>
2     <head>
3         <script language="javascript" src="template.js"></script>
4     </head>
5 </html>

　　②创建数据，这个数据可以是静态写好的数据，也可以是ajax从服务器端读来的数据，下面简单期间采用静态写好的数据：

1 var data = { 
2 products : [ { name: "mac", desc: "computer", 
3 price: 1000, quantity: 100, alert:null }, 
4 { name: "ipod", desc: "music player", 
5 price: 200, quantity: 200, alert:"on sale now!" }, 
6 { name: "cinema display", desc: "screen", 
7 price: 800, quantity: 300, alert:"best deal!" } ], 
8 customer : { first: "John", last: "Public", level: "gold" } 
9 };

　　③创建JST模板如下：

　　需要符合如下格式：

1 <textarea id="elementId" style="display:none;"> template body </textarea>

　　下面的是我们这个例子的模板：

 1 <textarea id="cart_jst" style="display:none;"> 
 2 Hello ${customer.first} ${customer.last}.<br/> 
 3 Your shopping cart has ${products.length} item(s): 
 4 <table> 
 5 <tr><td>Name</td><td>Description</td> 
 6 <td>Price</td><td>Quantity & Alert</td></tr> 
 7 {for p in products} 
 8 <tr><td>${p.name|capitalize}</td><td>${p.desc}</td> 
 9 <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td> 
10 </tr> 
11 {forelse} 
12 <tr><td colspan="4">No products in your cart.</tr> 
13 {/for} 
14 </table> 
15 {if customer.level == "gold"} 
16 We love you! Please check out our Gold Customer specials! 
17 {else} 
18 Become a Gold Customer by buying more stuff here. 
19 {/if} 
20 </textarea>

　　④下面需要在HTML的body下创建我们常用的holder或者container或者别的你喜欢的名字：

1 <div id="outputDiv"> 
2 </div>

　　⑤编写对应的核心代码，其实就简单的几行，也是JST的核心函数，如下：

1 <script language="javascript"> 
2 //key function
3 var result = TrimPath.processDOMTemplate("cart_jst", data); 
4 //instead  you can also use next two function
5 var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst"); 
6 var result = myTemplateObj.process(data); 
7 //display in DOM
8 document.getElementById("outputDiv").innerHTML = result; 
9 </script>

　　其中第三行的代码与第五行、六行的代码一样的功能，在你写的时候用其中之一即可。

　　⑥下面是运行结果，当然如果你加上对应的样式，会更好看的！

1 Hello John Public.
2 Your shopping cart has 3 item(s):
3 Name    Description    Price    Quantity & Alert
4 MAC    computer    $1000    100 :
5 IPOD    music player    $200    200 : ON SALE NOW!
6 CINEMA DISPLAY    screen    $800    300 : BEST DEAL!
7 We love you! Please check out our Gold Customer specials!

　　3、API

　　想着自己去翻译下对应的API，但是去官网下载文档和JS文件，怎想速度太慢，等了半天都没下下来，就去网上找了下别人写好的，只好“拿来”主义了。

　　附原文地址：http://my.oschina.net/crazyinsomnia/blog/3542

首先到下载页面下载 template.js
然后在你的JSP/ASP/PHP等文件中引用

CODE:

<script language="javascript" src="trimpath/template.js"></script>

当你引用了template.js文件之后，脚本将创建一个名叫“trimpath"的物件给你使用。
TrimPath Object
这个物件是一个全局的单一变量，也是所有trimpath组件的访问入口，除了它自身，我们尝试建立一个清晰的命名空间给您使用。
下面是 Trimpath 定义的方法：

CODE:

TrimPath.parseDOMTemplate ( elementId, optionalDocument )

得到页面中ID为elementId的Dom组件的InnerHTML，并将其解析成一个模板，这个方法返回一个templateObject对象（下面将详细描述），解析出错时将抛出一个异常，下面是这个方法的参数：
elementId DOM组件，其innerhtml将用来做模板
optionalDocument 一个可选参数，在使用iframe，frameset或者默认多文档时会有用
通常用来做模板的DOM元素是一个隐藏的<textarea>，如下面的例子

CODE:

<textarea >EOF