doT js模板入门

页面导航:首页 > 网络编程 > JavaScript > doT js模板入门

doT js模板入门

来源: 作者: 时间:2016-01-23 10:23 【

Hi {{=it name}}!{{=it age || }} var dataInter = {name: Jake, age: 31}; var interText = doT template($( interpolationtmpl) html()); $( interpola

 

<script type=text/javascript src=../../doT.js></script><script type=text/javascript src=http://hbjltv.com/static/js/jquery-1.11.1.js></script>
Hi {{=it.name}}!
{{=it.age || ''}}

 
<script type=text/javascript> var dataInter = {name: Jake, age: 31}; var interText = doT.template($(#interpolationtmpl).html()); $(#interpolation).html(interText(dataInter)); </script>

运行结果:
运行结果

实例二:条件判断


{{? !it.name }}
你还没有名字
{{?? }}
Oh, I love your name, {{=it.name}}!
{{?}}

 
<script type=text/javascript> var dataEncode = {name: 黄威, age: 31}; var interText = doT.template($(#conditionstmpl).html()); $(#condition).html(interText(dataEncode)); </script>

运行结果:
运行结果

实例三:循环+条件判断


{{ for(var prop in it) { }} {{? typeof it[prop]=='object' }}
KEY:{{= prop }}---VALUE:
{{ for(var prop2 in it[prop]) { }}
key:{{= prop2 }}---value:{{= it[prop][prop2] }}
{{ } }} {{?? }}
KEY:{{= prop }}---VALUE:{{= it[prop] }}
{{?}} {{ } }}

 
<script type=text/javascript> var dataEval = { name: Jake, age: 31, interests: [basketball, hockey, photography], contact: {email: , phone: 999999999} }; var evalText = doT.template($(#evaluationtmpl).html()); $(#evaluation).html(evalText(dataEval)); </script>

运行结果:
运行结果下载地址:
doT 及实例

说明:
1,{{? typeof it[prop]==’object’ }} 表示条件判断,结束标签是{{?}}
2, {{?? }}是条件判断的else
3,{{ 和{{? 中均可以使用原生的js语法,如for,typeof 等
4,模板并不是一定要放在script标签中,也可以放在隐藏的div标签中

作者: 黄威
博客地址:
CSDN博客主页
itEye博客主页

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<