资讯专栏INFORMATION COLUMN

nej jst模板语言标签

马永翠 / 2269人阅读

摘要:为内置变量,值为列表长度,上例中值为。语法备注循环时包含和值范例备注为内置变量,值为循环的索引值。描述遍历表语法注子语句为可选范例注为内置变量,值为当前项的键值。

复制到这里一下,方便日后查询,源地址
如果模板中存在 /换成/

如何使用jst模板

代码举例:


后续可以使用_$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}
{/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}
{/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}
{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}
            
  • ${item}
  • {/for} {/macro}

    调用宏:

    ${htmlList(["首页", "日志","相册", "关于我"])}
    

    输出:

    • 首页
    • 日志
    • 相册
    • 关于我
    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}
    

    范例:

    ${"
    1234163
    "|escape}

    输出:

    1234163

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

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/87749.html

    相关文章

    • requirejs的插件介绍与制作

      摘要:一句化即它是插件的插件,作者事后才发现有这么一个插件绕了不少弯路。这里的主要是为了保存这段内容用于打包使用。免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者郑海波授权网易云社区发布。 前言我这里就不介绍requirejs了, 简而言之: requirejs是支持AMD规范的模块加载器, 事实上它也是...

      shinezejian 评论0 收藏0
    • Babel 插件原理的理解与深入

      摘要:抽象语法树是怎么生成的谈到这点,就要说到计算机是怎么读懂我们的代码的。需要注意什么状态状态是抽象语法树转换的敌人,状态管理会不断牵扯我们的精力,而且几乎所有你对状态的假设,总是会有一些未考虑到的语法最终证明你的假设是错误的。 现在谈到 babel 肯定大家都不会感觉到陌生,虽然日常开发中很少会直接接触到它,但它已然成为了前端开发中不可或缺的工具,不仅可以让开发者可以立即使用 ES 规范...

      draveness 评论0 收藏0
    • NEJ _$$Event类

      摘要:所有我们在的时候需要将参数反转一下处理中的所有事件,如果有定义事件,将事件和回调函数,传入实例的对象中调用父类的重置方法。获取事件类型之外的所有参数参数传入事件函数调用可以说是框架的基石,的强大功能都是基于此类。 基类 NEJ.C() 定义 NEJ框架中定义一个类统一使用NEJ.C方法,使用范例如下所示: /** * 类描述信息 * @class 类名称 * @extend...

      BenCHou 评论0 收藏0
    • 前端的发展历程

      摘要:前端的发展历程什么是前端前端针对浏览器的开发,代码在浏览器运行后端针对服务器的开发,代码在服务器运行前端三剑客超文本标记语言是构成世界的基石。 前端的发展历程 什么是前端 前端:针对浏览器的开发,代码在浏览器运行 后端:针对服务器的开发,代码在服务器运行 前端三剑客 HTML CSS JavaScript HTML HTML(超文本标记语言——HyperText Markup ...

      刘明 评论0 收藏0
    • 【整理】前端国际化小结

      摘要:近期在做国际化的改造,做了相应的调研,简单做下项目前端国际化的小结国际化可以分为前端国际化和后端国际化,也可以是前后端组合的国际化后端多为国际化,这里不做展开,百度一下到处都是常见型常见的前端国际化方法步骤如下原理定义国际化配置根据环境读取 近期在做国际化的改造,做了相应的调研,简单做下项目前端国际化的小结 国际化可以分为前端国际化和后端国际化,也可以是前后端组合的国际化后端多为spr...

      android_c 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <