doT模版入门
Author: Vic.Wang 2015/09/16
之前工作中一直使用artTemplate,新公司这边用的是doT,那就入乡随俗吧。
首先下载doT文件:doT.1.0.3.min.js
然后在HTML里面引入
<script src="doT.min.js"></script>
还需要一个
<script id="userTemp" type="text/x-dot-template"> //内容 </script>
示例数据:
var res = {name: 'vic', age: 25, job: 'front-end'};
HTML代码:
JS代码中调用方式:
var htmlStr = doT.template($('#userTemp').html()); $('#userInfo').html(htmlStr(res));
注意:这里使用了jQuery,你可以用原生或其他库。
示例代码:
<script id="userTemp" type="text/x-dot-template">姓名:{{=it.name}}
年龄:{{=it.age}}
职业:{{=it.job}}
</script>
在doT的语法中,总是用
//赋值 {{= it.name}}
//判断 {{? it.name}} //内容 {{?}} //多个条件判断 {{? it.name == 'vic'}} //if内容 {{??}} //else内容 {{?}} {{? it.name == 'vic'}} //if内容 {{?? it.name =='nlx'}} //elseif内容 {{?}}
//循环 {{~ it:value:index}}{{=value.name}}
{{~}}
注意:在循环里面,
//还可以加函数de无论是系统还是自定义 {{= formatName(it.name)}}
总结:doT里面的语法和原生JS是差不多的,就是多了{{=}}、{{?}}、{{~}}这些,熟悉JS的人上手是很快的。这里只是我目前用到的,以后用到其他的语法,再来补充哈。
本文地址:http://blog.mingsixue.com/it/doT-induction.html
文章若需转载,请附上原文链接,谢谢配合。^_^