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