doT.js 学习

Posted 2020-10-05

刚来公司第二天就让我做app,以前也没接触过，后来发现用apicloud开发app很简单，就是apicloud本身有点坑。

期间遇到了一个模板doT,觉得挺有意思的。想总结一下：

1）doT.js 是一个模板框架，在web前端使用。主要用途是在写好的模板上放入数据，生成含有数据的html代码。使用前要导入doT.min.js
2）常用的模板：

　　{{= }} for interpolation //赋值操作

       {{ }} for evaluation //循环操作

　　{{~ }} for array iteration //数组操作

　　{{? }} for conditionals //条件操作

　　{{! }}赋值并且编码

　　目前为止我只用到了{{= }} 和{{ }}   只要不是HTML代码都要用{{}}包起来
3）调用方式：var tmpText = doT.template(模板);
　　　　　　   tmpText(数据源);
4）特点：doT.js特点是快，小，无依赖其他插件

5）案例：

区域:<div id="interpolation"></div>　

模板：

<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ‘‘}}</div>
</script>

调用方式：

var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));

interText(dataInter) 相当于 {{=it.name}}中的it