nej jst模板語言標籤

複製到這裏一下,方便往後查詢,源地址
若是模板中存在 </texterea>/換成&#47;javascript

如何使用jst模板

代碼舉例:html

<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接口獲取整合數據的結果java

代碼舉例:git

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語法

表達式

${}

描述:求值表達式,表達式中不能夠包含 「{」或者「}」github

語法:api

${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 %}

範例:spa

${% emitLink("Solution and Products", {color: "red", blink: false}) %}

語句

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爲內置變量,值爲循環的索引值。
x_length爲內置變量,值爲列表長度, 上例中值爲3。

語法2:

{list from..to as varName}
    ...
{/list}

備註:循環時包含from和to值

範例2:

{list 2..10 as x}
    ${x_index}/${x_length}:${x}<br/>
{/list}

備註:

x_index爲內置變量,值爲循環的索引值。
x_length爲內置變量,值爲列表長度, 上例中值爲9。

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 expr}
    ...
{elseif expr}
    ...
{else}
    ...
{/if}

注:elseif、else 子語句爲可選

範例:

{if gender == 1}
    男
{elseif gender == 0}
    女
{else}
    春哥
{/if}

var

描述:變量定義

語法:

{var varName}

{var varName = expr}

範例:

{var test = "sssssss"}

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}
    ...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}
    ...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

描述:執行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

描述:編碼字符串

語法:

${expr|escape}

範例:

${"<div>1234<a href="#">163</a></div>"|escape}

輸出:&lt;div&gt;1234&lt;a href="#"&gt;163&lt;/a&gt;&lt;/div&gt;

format

描述:格式化日期

語法:

${data_expr|format:format_expr}

範例:

${new Date()|format:"yyyy-MM-dd HH:mm:ss"}

輸出:2012-06-13 16:30:55

default

描述:指定默認值

語法:

${expr|default:default_expr}

範例:

${null|default:"default value"}

輸出:default value

注:當expr爲undefiend,null,false,0或者空字符串時取默認值

相關文章
相關標籤/搜索