Home / Blog / it

doT模版入门

Author: Vic.Wang 2015/09/16 Tags:jsdotdotjsjs模版doT模版

之前工作中一直使用artTemplate,新公司这边用的是doT,那就入乡随俗吧。

首先下载doT文件:doT.1.0.3.min.js

然后在HTML里面引入

        <script src="doT.min.js"></script>
                    

还需要一个script用来放模版,需要指定一个id或者class,还需要指定type="text/x-dot-template"

        <script id="userTemp" type="text/x-dot-template">
            //内容
        </script>
                    

示例数据:

        var res = {name: 'vic', age: 25, job: 'front-end'};
                    

HTML代码:

        

JS代码中调用方式:

        var htmlStr = doT.template($('#userTemp').html());
        $('#userInfo').html(htmlStr(res));
                    

注意:这里使用了jQuery,你可以用原生或其他库。

示例代码:

        <script id="userTemp" type="text/x-dot-template">
            

姓名:{{=it.name}}

年龄:{{=it.age}}

职业:{{=it.job}}

</script>

在doT的语法中,总是用 {{ }} 两对花括号包起来的, it 是必须要写的,表示传入的值

        //赋值
        {{= it.name}}
                    
        //判断
        {{? it.name}}
            //内容
        {{?}}

        //多个条件判断
        {{? it.name == 'vic'}}
            //if内容
        {{??}}
            //else内容
        {{?}}

        {{? it.name == 'vic'}}
            //if内容
        {{?? it.name =='nlx'}}
            //elseif内容
        {{?}}
                    
        //循环
        {{~ it:value:index}}
            

{{=value.name}}

{{~}}

注意:在循环里面,it要变成value

        //还可以加函数de无论是系统还是自定义
        {{= formatName(it.name)}}
                    

总结:doT里面的语法和原生JS是差不多的,就是多了{{=}}、{{?}}、{{~}}这些,熟悉JS的人上手是很快的。这里只是我目前用到的,以后用到其他的语法,再来补充哈。