最新消息:

JS第10款:doT.js模板引擎

JS插件 杨红伟 60浏览

网址:https://github.com/apicloudcom/apicloud-js-module/blob/master/doT/index.html

这是这里边的示例,我分开分析了一下!

一:赋值

注:这里第一段代码有问题,点击去没问题,这是 这款笔记客户端的BUG!

1、模板

<!--  赋值 -->
<script id="interpolationTemp" type="text/x-dot-template" >
    <h1> hello {{=it.name}} </h1>
</script>
<div id="interpolation"></div>

2、JS

<script type="text/javascript">
    //    赋值    
    var interpolationData = { 'name' : 'word' };    
    var interpolation = doT.template( $api.dom('#interpolationTemp').innerHTML );
    $api.dom( '#interpolation' ).innerHTML = interpolation( interpolationData );
</script>

3、结果

mark

二:循环

1、模板

<!--  循环 -->
<script id="evaluationTemp" type="text/x-dot-template">
    {{ for(var x in it) { }}
        <p>{{= x }} - > {{= it[x] }}</p>
    {{ } }}
</script>
<div id="evaluation"></div>

2、JS

<script type="text/javascript">
    //    循环    
    var evaluationData = {'firstName' : 'bi', 'lastName' : 'mingxing', 'age' : 22 };    
    var evaluation = doT.template( $api.dom('#evaluationTemp').innerHTML );
    $api.dom( '#evaluation' ).innerHTML = evaluation( evaluationData );
</script>

3、结果

mark

三:迭代

1、模板

<!--  迭代 -->

    {{~it.array:value:index}}
        <p>{{= index+1 }}{{= value }}</p>
    {{~}}

<div id="interation"></div>

2、JS


// 迭代 var interationData = {"array":["banana","apple","orange"]}; var interation = doT.template( $api.dom('#interationTemp').innerHTML ); $api.dom( '#interation' ).innerHTML = interation( interationData );

3、结果

mark

四:条件语句(我没看懂)

1、模板

<!--  条件语句 -->

    {{? it.lastName }}
        <p>{{= it.lastName }}</p>
    {{?}}

    {{? it.name }}
        <p>{{= it.name }}</p>
    {{?? it.firstName }}
        <p>{{= it.firstName }}</p>
    {{?}}

    {{? it.lastName }}
        <p> {{= it.lastName }}</p>
    {{?? it.age === 22}}
        <p> {{= it.lastName }}</p>
    {{?? it.firstName }}
        <p> {{= it.firstName }}</p>
    {{??}}
        <p>no data!</p>
    {{?}}

<div id="conditionals"></div>

2、JS


var evaluationData = {'firstName' : 'bi', 'lastName' : 'mingxing', 'age' : 22 }; // 条件语句 var conditionals = doT.template( $api.dom('#conditionalsTemp').innerHTML ); $api.dom( '#conditionals' ).innerHTML = conditionals( evaluationData );

3、结果

mark