doT.js 学习

刚来公司第二天就让我做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

 

posted @ 2017-09-04 16:19  夕木木青  阅读(877)  评论(0编辑  收藏  举报