複制到這裡一下,友善日後查詢,源位址
如果模闆中存在
</texterea>
将
/
換成
/
如何使用jst模闆
代碼舉例:
<textarea name="jst" id="jst-template-1">
<table class="w-table">
<thead>
<tr><th>序号</th><th>姓名</th><th>性别</th></tr>
</thead>\
{if !defined("workers")}
<tr><td colspan="3">資料加載失敗,請稍後再試!</td></tr>
{elseif workers&&workers.length}
{list workers as x}
<tr{if x_index==x_length-1} class="last"{/if}>
<td>${x_index+1}</td>
<td>${x.name}</td>
<td>{if x.gender==1}男{else}女{/if}</td>
</tr>
{/list}
{else}
<tr><td colspan="3">沒有勞工!</td></tr>
{/if}
</table>
</textarea>
後續可以使用_$get接口擷取整合資料的結果
代碼舉例:
NEJ.define([
'util/template/jst'
],function(_t){
// 添加模版緩存
// 也可以用_$parseTemplate接口批量添加
_t._$add('jst-template-1');
// 根據模闆ID取模闆内容
// 傳回整合資料後的html代碼
var _html = _t._$get('jst-template-1',{
workers:[
{name:'abc',gender:1},
{name:'def',gender:1},
{name:'ghi'}
]
});
// TODO
});
JST文法
表達式
${}
${}
描述:求值表達式,表達式中不可以包含 “{”或者“}”
文法:
${expr}
${expr|modifier}
${expr|modifier1|modifier2|...|modifierN}
${expr|modifier1:argExpr1_1}
${expr|modifier1:argExpr1_1,argExpr1_2,...,argExpr1_N}
${expr|modifier1:argExpr1_1|...|modifierN:argExprN_1,argExprN_2,...,argExprN_M}
範例:
${customer.firstName}
${customer.firstName|capitalize}
${customer.firstName|default:"no name"|capitalize}
${article.getCreationDate|default:new Date()|toCalendarControl:"YYYY.MM.DD",true,"creation Date"}
${(lastQuarter.calcRevenue() - fixedCosts) / 10000}
${% %}
${% %}
描述:求值表達式,表達式中可以包含 “{”或者“}”
文法:
${% expr %}
範例:
${% emitLink("Solution and Products", {color: "red", blink: false}) %}
語句
list break
list break
描述:周遊數組
文法1:
{list seq as varName}
...
{break}
...
{/list}
範例1:
{list ["aaa", "bbbb", "ccccc"] as x}
${x_index}/${x_length}:${x}<br/>
{/list}
備注:為内置變量,值為循環的索引值。
x_index
為内置變量,值為清單長度, 上例中值為3。
x_length
文法2:
{list from..to as varName}
...
{/list}
備注:循環時包含from和to值
範例2:
{list 2..10 as x}
${x_index}/${x_length}:${x}<br/>
{/list}
備注:為内置變量,值為循環的索引值。
x_index
為内置變量,值為清單長度, 上例中值為9。
x_length
for forelse
for forelse
描述:周遊HASH表
文法:
{for varName in hash}
...
{forelse}
...
{/for}
注:forelse 子語句為可選
範例:
{for x in {a:"aaa", b:"bbbb", c:"ccccc"}}
${x_key} - ${x}<br/>
{forelse}
no pro
{/for}
注:x_key為内置變量,值為目前項的鍵值。
if elseif else
if elseif else
描述:條件控制語句
文法:
{if expr}
...
{elseif expr}
...
{else}
...
{/if}
注:elseif、else 子語句為可選
範例:
{if gender == 1}
男
{elseif gender == 0}
女
{else}
春哥
{/if}
var
var
描述:變量定義
文法:
{var varName}
{var varName = expr}
範例:
{var test = "sssssss"}
macro
macro
描述:宏定義
文法:
{macro macroName(arg1, arg2, ... argN)}
... body of the macro ...
{/macro}
範例:
{macro htmlList(dataList, optionalListType)}
{var listType = optionalListType != null ? optionalListType : "ul"}
<${listType}>
{for item in dataList}
<li>${item}</li>
{/for}
</${listType}>
{/macro}
調用宏:
${htmlList(["首頁", "日志","相冊", "關于我"])}
輸出:
<ul>
<li>首頁</li>
<li>日志</li>
<li>相冊</li>
<li>關于我</li>
</ul>
cdata
cdata
描述:文本塊,内容不做文法解析
文法:
{cdata}
...no parsed text ...
{/cdata}
或
{cdata EOF}
...no parsed text ...
EOF
範例:
{cdata}
${customer.firstName}${customer.lastName}
{/cdata}
或
{cdata END_OF_CDATA_SECTION}
${customer.firstName}${customer.lastName}
END_OF_CDATA_SECTION
輸出:
${customer.firstName}${customer.lastName}
minify
minify
描述:壓縮文本内容,内容不做文法解析
文法:
{minify}
...multi-line text which will be stripped of line-breaks...
{/minify}
或
{minify EOF}
...multi-line text which will be stripped of line-breaks...
EOF
範例:
{minify}
no parsed
text
and
merge
one
line
{/minify}
或
{minify EOF}
no parsed
text
and
merge
one
line
EOF
輸出:
no parsed text and merge one line
eval
eval
描述:執行javascript語句,不做文法解析
文法:
{eval}
...javascript statement...
{/eval}
或
{eval EOF}
...javascript statement...
EOF
範例:
{eval}
var a = "aaaa";
alert(a);
function b(arg){
alert(arg);
}
{/eval}
或
{eval EOF}
var a = "aaaa";
alert(a);
function b(arg){
alert(arg);
}
EOF
擴充
rand
描述:随機一個指定長度的純數字的串
文法:
${number_expr|rand}
範例:
${10|rand}
輸出:
3456785438
escape
escape
描述:編碼字元串
文法:
${expr|escape}
範例:
${"<div>1234<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >163</a></div>"|escape}
輸出:
<div>1234<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >163</a></div>
format
format
描述:格式化日期
文法:
${data_expr|format:format_expr}
範例:
${new Date()|format:"yyyy-MM-dd HH:mm:ss"}
輸出:
2012-06-13 16:30:55
default
default
描述:指定預設值
文法:
${expr|default:default_expr}
範例:
${null|default:"default value"}
輸出:
default value
注:當expr為undefiend,null,false,0或者空字元串時取預設值