[转]JavaScript Template JST模板发动机-Trimpath
日期：2014-05-16 浏览次数：20429 次
[转]JavaScript Template JST模板引擎----Trimpath
官网：http://trimpath.com/project/wiki/JavaScriptTemplates
网址：http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。
它有如下的特点：
1、采用标准的JavaScript编写，支持跨浏览器
2、模板语法类似于：FreeMarker，Velocity,Smarty
3、采用简易的语言来描述大段的字串以及Dom/DHTML操作
4、可以很方便的解析XML文件格式的数据到指定模板。
采 用该引擎，可以让它来完全处理View方面的事情，服务端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处 理，大大减少了服务器的负担，用来构建Ajax技术的网络信息系统应用是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。
CODE:
<html>
<head>
<script language="javascript" src="trimpath/template.js"></script>
</head>
<body>
<div id="outputDiv">
</div>
<script language="javascript">
var data = {
products : [ { name: "mac", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</script>
<textarea id="cart_jst" style="display:none;">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td><td>Description</td>
<td>Price</td><td>Quantity & Alert</td></tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
<script language="javascript">
// The one line processing call...
var result = TrimPath.processDOMTemplate("cart_jst", data);
// Voila! That's it -- the result variable now holds
// the output of our first rendered JST.
// Alternatively, you may also explicitly parse the template...
var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
// Now, calls to myTemplateObj.process() won't have parsing costs...
var result = myTemplateObj.process(data);
// Setting an innerHTML with the result is a common last step...
document.getElementById("outputDiv").innerHTML = result;
// You might also do a document.write() or something similar...
</script>
</body>
</html>
JST十分钟简介
JST API
JST Markup Syntax
JST Standard Modifiers
JST Downloads
JST Community Wiki
JST Browser Compatibility
JST Online Demo
1、API
首先到下载页面下载 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 id="elementId" style="display:none;"> te
官网：http://trimpath.com/project/wiki/JavaScriptTemplates
网址：http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。
它有如下的特点：
1、采用标准的JavaScript编写，支持跨浏览器
2、模板语法类似于：FreeMarker，Velocity,Smarty
3、采用简易的语言来描述大段的字串以及Dom/DHTML操作
4、可以很方便的解析XML文件格式的数据到指定模板。
采 用该引擎，可以让它来完全处理View方面的事情，服务端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处 理，大大减少了服务器的负担，用来构建Ajax技术的网络信息系统应用是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。
CODE:
<html>
<head>
<script language="javascript" src="trimpath/template.js"></script>
</head>
<body>
<div id="outputDiv">
</div>
<script language="javascript">
var data = {
products : [ { name: "mac", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</script>
<textarea id="cart_jst" style="display:none;">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td><td>Description</td>
<td>Price</td><td>Quantity & Alert</td></tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
<script language="javascript">
// The one line processing call...
var result = TrimPath.processDOMTemplate("cart_jst", data);
// Voila! That's it -- the result variable now holds
// the output of our first rendered JST.
// Alternatively, you may also explicitly parse the template...
var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
// Now, calls to myTemplateObj.process() won't have parsing costs...
var result = myTemplateObj.process(data);
// Setting an innerHTML with the result is a common last step...
document.getElementById("outputDiv").innerHTML = result;
// You might also do a document.write() or something similar...
</script>
</body>
</html>
JST十分钟简介
JST API
JST Markup Syntax
JST Standard Modifiers
JST Downloads
JST Community Wiki
JST Browser Compatibility
JST Online Demo
1、API
首先到下载页面下载 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 id="elementId" style="display:none;"> te
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
