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代码：

        <div id="userInfo"></div>
                    

JS代码中调用方式：

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

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

示例代码：

        <script id="userTemp" type="text/x-dot-template">
            <p><strong>姓名：</strong>{{=it.name}}</p>
            <p><strong>年龄：</strong>{{=it.age}}</p>
            <p><strong>职业：</strong>{{=it.job}}</p>
        </script>
                    

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

        //赋值
        {{= it.name}}
                    

        //判断
        {{? it.name}}
            //内容
        {{?}}

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

        {{? it.name == 'vic'}}
            //if内容
        {{?? it.name =='nlx'}}
            //elseif内容
        {{?}}
                    

        //循环
        {{~ it:value:index}}
            <p>{{=value.name}}</p>
        {{~}}
                    

注意：在循环里面，it要变成value了

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

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