JST (template.js) 学习笔记

网易|前端

官网：http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

详细的教程，即翻译版本，可以直接看下面的博客地址：
http://bbs.chinaunix.net/thread-735901-1-1.html

模板一般放在一个display:none的textarea当中，然后待数据返回，绑定到相对应的部分，在js当中的处理是，使用 TrimPath.processDomTemplate(id, data)来将数据显示上去
具体的例子可以看上面详细教程当中的 code example

API

• TrimPath.processDOMTemplate
• TrimPath.parseDOMTemplate
• templateObject.process

Syntax

Expressions and Expression Modifiers

${expr} ${expr|modifier}
${expr|modifier1|modifier2|...|modifierN}
${expr|modifier1:argExpr1_1}
${expr|modifier1:argExpr1_1,argExpr1_2,...,argExpr1_N}
${expr|modifier1:argExpr1_1,argExpr1_2|...|modifierN:argExprN_1,argExprN_2,...,argExprN_M}

Examples: 
${customer.firstName}
${customer.firstName|capitalize}
${customer.firstName|default:"no name"|capitalize}
${article.getCreationDate()|default:new Date()|toCalenderControl:"YYYY.MM.DD",true,"Creation Date"}
${(lastQuarter.calcRevenue() - fixedCosts) / 1000000}

一个表达式也可以像下面一样通过添加“％”字符来标识，这个可以避免在你的表达式中出现“}”时出错的情况

Expressions can also be optionally specified as "${% customer.firstName %}"

Statements (表达式)

Control Flow

{if testExpr} {elseif testExpr} {else} {/if}

Loops

{for varName in listExpr} {/for}
|
{for varName in listExpr}
    ...main body of the loop...
{forelse}
    ...body when listExpr is null or listExpr.length is 0... 
{/for}

两个自带的变量：
varname_index代表当前的 下标
__LIST__x 代表listExpr的结果

Examples:
{for x in customer.getRecentOrders()}
${x_index} : ${x.orderNumber} <br/>
{forelse}
You have no recent orders.
{/for}

Converted pseudo-code for the above...
var __LIST__x = customer.getRecentOrders();
if (__LIST__x != null && __LIST__x.length > 0) {
    for (var x_index in __LIST__x) {
        var x = __LIST__x[x_index];
        ${x_index} : {$x.orderNumber} <br/>
    }
} else {
    You have no recent orders.
}

Variable Declarations

{var varName}
|
{var varName = varInitExpr}

Macro Declarations

{macro macroName(arg1, arg2, ...argN)} ...body of the macro... {/macro}

A macro is like a JavaScript function, except the body of the macro is another JavaScript Template, not JavaScript.
    That is, the body of the macro may contain JST expressions and statements.

宏类似于一个javascript函数，不同点在于宏的主体是另外一个包含了诸如控制语句、循环语句的JST模板

{macro htmlList(list, optionalListType)}
    {var listType = optionalListType != null ? optionalListType : "ul"}
    <$listType>
        {for item in list} 
            ${item}
        {/for}
    </$listType>
{/macro}

Regarding macro scope: by default, macros are defined private to each template. If you want to export a macro so that it can be reused in other templates (such as building up a helper library of macros), one approach is to save a reference to your macro into your ''contextObject''. For example, in the ''contextObject'' that's the argument to ''template.process(contextObject)'', you can set ''contextObject['exported'] = {};'' before you call process(). Then, here's how you can capture a macro into ''contextObject['exported']''...

{macro userName(user)}
    {if user.aliasName != null && user.aliasName.length > 0}           ${user.aliasName}
    {else}
        ${user.login}
    {/if}
{/macro}
${exported.userName = userName |eat}

Cleverly, you might also set ''contextObject['exported'] = contextObject;'' It's circular, but it works.

--

Modifiers

The JavaScript Template engine includes several standard modifiers, which are used to modify the output of expressions. For example, the capitalize modifer is used like: ${customer.countryName|capitalize}

主要有以下的一些修饰器
capitalize
default:valueWhenNull
eat
escape
h   -> the same as the escape

• '''capitalize'''
  +This modifier capitalizes all the letters in the string, using String.prototype.toUpperCase()
  
  • Example: ${customer.emailAddr + " " + customer.countryName|capitalize} might produce something like "BILLG@MICROSOFT.COM USA"
• '''default:valueWhenNull'''
  
  • This modifier tests the expression for null. If null, the default modifier returns the valueWhenNull argument.
  • Examples:
    ${customer.aliasName|default:"anonymous"}
    ${customer.aliasName|default:customer.emailAddress)}
  • Note, if your expression is a top level variable, JavaScript makes a distinction between null and undefined values. If your expression is a top level variable reference and is undefined (instead of null), you'll get an exception, even if you try to protect the reference by using the '''default''' modifier.
  • For example if systemAdminMessage is null, the following will work fine. But, if systemAdminMessage is undefined, the following will throw an exception.
  • ${systemAdminMessage|default:""}
  • To prevent the error, you can use the defined(str) helper function, in a protective if statement. For example...
  • {if defined('systemAdminMessage')} ${systemAdminMessage|default:""} {/if}
• '''eat'''
  
  • The eat modifier always returns the empty string or "".
  • The eat modifier is useful if you want to run some JavaScript code, but do not want to output anything.
  • Example: ${shoppingCart.calculateTaxes(shippingAddress)|eat}
• '''escape'''
  
  • Converts the characters of & to &, < to <, and > to >.
  • The escape modifier is useful to prevent Cross-Site Scripting attacks, preventing evildoers from injecting their own HTML or JavaScript into your pages.
  • Example: ${blogEntry.text|escape}
• '''h'''
  
  • The h modifier is the same as the escape modifier.
  • Example: ${blogEntry.text|h}