JST（JavaScript Templates）,JST引擎使用JavaScript编写，支持类似于FreeMarker等模块标记语言。
例子
首先在html中使用jst，要导入TrimPath JST js库。
<html>
<head>
<script language="javascript" src="trimpath/template.js"></script>
...
</head>
...
</html>
然后使用js创建数据：
<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>
将jst模板写在一个隐藏的textarea中，如：
<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>
要调用结果的时候，使用js调用：
//The one line processing call...
var result = TrimPath.processDOMTemplate("cart_jst", data);
JST API
TrimPath对象
JST组建的所有函数都有TrimPath对象提供，相当于命名空间。
TrimPath.parseDOMTemplate(elementId,optionalDocument)
查找到DOM树中elementId指定的元素，（一般来说， elementId都指向隐藏的textarea，因为textarea具有良好的特性，它的innerHTML可以支持任何html代码，以及JST模板语言中的任何东西），将其innerHTML解析为一个模板对象(template object)， optionalDocument可选，如果在iframes中或者多个窗口时，指定某个document。
TrimPath.parseDOMTemplate(elementId, optionalDocument)
查找到DOM树中elementId指定的元素，（一般来说， elementId都指向隐藏的textarea，因为textarea具有良好的特性，它的innerHTML可以支持任何html代码，以及JST模板语言中的任何东西），将其innerHTML解析为一个模板对象(template object)， optionalDocument可选，如果在iframes中或者多个窗口时，指定某个document。
TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)
该函数，先调用TrimPath.parseDOMTemplate(),然后在返回的模板对象上调用process ()方法，返回一个已经包装好数据的字符串。
| 参数 | 意义 |
| elementId | DOM树中包含JST模板的元素id |
| contextObject | 包含JST模板待包装的各种相关数据，是一个js对象 |
| optionalFlags | 几个可选的标记对象 |
| optionalDocument | 可选的document参数，主要用在多ducument环境中 |
TrimPath.parseTemplate(templateContentStr,optionalTemplateName)
将一个字符串解析成为一个templateObject,如解析出错，则抛出异常。函数参数如下：
| 参数 | 意义 |
| templateContentStr | JST模板字符串，如"hello ${firstName}" |
| optionalTemplateName | 指定模板的名字（可选），（用来调试） |
templateObject.process(contextObject,optionalFlags)
模板对象的process方法将模板和包含内容的"contectObject"的组装在一起，最终返回一个字符串。 contectObject参数必须是一个js对象，如果在模板中引用到"${a}",那么contectObject必有有a这个属性，即 contectObject.a是可访问的，同理，如在模板中有"${a.b.c}"，那么contectObject.a.b.c.d也必须是可访问的。 contectObject中可以包含任何js对象，包括字符串，数字，日期，对象和函数等。在模板中"${groupCalender(new Date())}"将会调用contectObject.groupCalender(new Date())。当然contectObject中得有这个函数，而且该函数必须返回一个字符串。
optionalFlags也是一个参数，该参数可选。该参数可以指定解析模板时的一些行为。
| 标记 | 意义 |
| optionalFlags.throwExceptions | 默认为false；设为true时，如有异常发生，将会抛出异常，异常字符串会接在当前已解析的字符串返回。 |
| optionalFlags.keepWhitespace | 默认为false；设为true时，模板中的所有空白字符将被保留。 |
没有评论:
发表评论