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 的人上手是很快的。这里只是我目前用到的，以后用到其他的语法，再来补充哈。