nej jst模板言语标签

复制到这里一下,轻易往后查询,源地址
假如模板中存在 </texterea>/换成&#47;

怎样运用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

形貌:遍历数组

语法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或许空字符串时取默认值

    原文作者:Star_
    原文地址: https://segmentfault.com/a/1190000004950088
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞