前端art-template模板引擎的使用

1.语法

1.1输出

{{value}}
{{obj.key}} 
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}

1.2原文输出；如果要输出的value值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证HTML标签被正常渲染。

{{@ value}}

1.3条件输出:如果要实现条件输出，则可以在{{}}中使用if … else if … /if的方式，进行按需输出。

{{if value}}按需输出的内容{{/if}}
{{if v1}}按需输出的内容{{e1se if v2}}按需输出的内容 { {/if} }

1.4 循环输出:如果要实现循环输出，则可以在{{}}内，通过each语法循环数组，当前循环的索引使用$index进行访问,当前的循环项使用$value进行访问。

{{each arr}}
    {{$index}}  {{$value}}
{{/each}}

1.5过滤器：本质就是一个function处理函数

{{value|filterName}}

过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

template.defaults.imports.filtezName = function (value) { /*return处理的结果*/}

2. 举例

引入

 <!-- 1. 导入模板引擎 -->
    <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
    <script src="./lib/template-web.js"></script>
    <script src="./lib/jquery.js"></script>

body

<div id="container"></div>
<!-- 3. 定义模板 -->
<!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
<script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
    {{@ test}}

    <div>
        {{if flag === 0}}
        flag的值是0
        {{else if flag === 1}}
        flag的值是1
        {{/if}}
    </div>

    <ul>
        {{each hobby}}
        <li>索引是:{{$index}}，循环项是:{{$value}}</li>
        {{/each}}
    </ul>

    <h3>注册时间：{{regTime | dateFormat}}</h3>
</script>

<script>
  
    // 2. 定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }
    
      // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        return y + '-' + m + '-' + d
    }

    // 4. 调用 template 函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 使用jQuery渲染HTML结构
    $('#container').html(htmlStr)
</script>