什么是标准语法

art-template提供了"{{}}"这种语法格式,在{{}}内可以及进行变量输出,或循环数组等操作,这种{{}}语法在art-template中被称为标准语法

标准语法 - 输出

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

在{{}}语法中,可以进行变量的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出

标准语法 - 原文输出

{{@ value}}

如果要输出的value值中,包含了HTML结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染,否则会输出HTML的标签内容

标准语法 - 条件输出

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

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

标准语法 - 循环输出

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

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

标准语法 - 过滤器

过滤器的本质,就是一个function处理函数

{{value | filterName}}

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

定义过滤器的基本语法如下:

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

<div>注册时间: {{regTime | dataFormat}}</div>

定义一个格式化时间的过滤器dateFormate如下:

template.defaults.imports.dateFormat = function(date) {
    var y = date.getFullYear()
    var m = date.getMonth() + 1 //月份从0开始 所以需要+1
    var d = date.getDate()

    return y + '-' + m + '-' + d //注意 过滤器最后一定要return一个值
}

总结标准语法(代码)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/jQuery.js"></script>
    <!--导入模板引擎后,在window全局多一个叫做
        template('模板的id', 需要渲染的数据对象)函数-->
    <script src="../../js/template-web.js"></script>
</head>

<body>
    <div id="container"></div>
    <!--模板的HTML结构必须定义到script中 并且将type改为"text/html-->
    <!--"{{}}"是art-template提供的一个占位符 表示这里要填充数据-->
    <script type="text/html" id="tpl-user">
        <h1>{{name}} -------------- {{age}}</h1>
        {{test}} {{@ test}}
        <div>
            {{if flag === 0}} flag的值是0 {{/if}}
        </div>
        <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>
        template.defaults.imports.dateFormat = function(date) {
            // console.log(date);
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d
        }

        //定义需要渲染的数据
        var data = {
            name: 'zs',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        };
        //调用template()函数
        var htmlstr = template('tpl-user', data);
        // console.log(html);

        //渲染UI结构 将template方法返回的内容填充到元素内部
        $('#container').html(htmlstr);
    </script>
</body>

</html>

原文链接：https://blog.csdn.net/m0_63400611/article/details/123673825