新航路师徒学院

 找回密码
 立即注册
搜索
查看: 523|回复: 0

doT.js 详细介绍

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-9-27 13:51:40 | 显示全部楼层 |阅读模式
  1. doT.js特点是快,小,无依赖其他插件。

  2. 官网:
  3. http://olado.github.io

  4. doT.js详细使用介绍

  5. 使用方法:
  6. {{= }} for interpolation
  7. {{ }} for evaluation
  8. {{~ }} for array iteration
  9. {{? }} for conditionals
  10. {{! }} for interpolation with encoding
  11. {{# }} for compile-time evaluation/includes and partials
  12. {{## #}} for compile-time defines

  13. 调用方式:
  14. var tmpText = doT.template(模板);
  15. tmpText(数据源);


  16. 例子一:



  17. 1、for interpolation 赋值
  18. 格式:
  19. {{= }}



  20. 数据源:{"name":"Jake","age":31}

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



  22. 模板:

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

  27. 调用方式:

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



  31. 例子二:

  32. 2、for evaluation for in 循环
  33. 格式:
  34. {{ for var key in data { }}
  35. {{= key }}
  36. {{ } }}

  37. 数据源:{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}}

  38. 区域:<div id="evaluation"></div>

  39. 模板:

  40. <script id="evaluationtmpl" type="text/x-dot-template">
  41. {{ for(var prop in it) { }}
  42. <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
  43. {{ } }}
  44. </script>

  45. 调用方式:

  46. var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};
  47. var evalText = doT.template($("#evaluationtmpl").text());
  48. $("#evaluation").html(evalText(dataEval));



  49. 例子三:

  50. 3、for array iteration 数组
  51. 格式:
  52. {{~data.array :value:index }}
  53. ...
  54. {{~}}

  55. 数据源:{"array":["banana","apple","orange"]}

  56. 区域:<div id="arrays"></div>

  57. 模板:
  58. <script id="arraystmpl" type="text/x-dot-template">
  59. {{~it.array:value:index}}
  60. <div>{{= index+1 }}{{= value }}!</div>
  61. {{~}}
  62. </script>

  63. 调用方式:

  64. var dataArr = {"array":["banana","apple","orange"]};
  65. var arrText = doT.template($("#arraystmpl").text());
  66. $("#arrays").html(arrText(dataArr));




  67. 例子四:

  68. 4、{{? }} for conditionals 条件
  69. 格式:
  70. {{? }} if
  71. {{?? }} else if
  72. {{??}} else

  73. 数据源:{"name":"Jake","age":31}

  74. 区域:<div id="condition"></div>
  75. 模板:
  76. <script id="conditionstmpl" type="text/x-dot-template">
  77. {{? !it.name }}
  78. <div>Oh, I love your name, {{=it.name}}!</div>
  79. {{?? !it.age === 0}}
  80. <div>Guess nobody named you yet!</div>
  81. {{??}}
  82. You are {{=it.age}} and still dont have a name?
  83. {{?}}
  84. </script>

  85. 调用方式:

  86. var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
  87. var EncodeText = doT.template($("#encodetmpl").text());
  88. $("#encode").html(EncodeText(dataEncode));





  89. 例子五:

  90. 5、for interpolation with encoding
  91. 数据源:{"uri":"http://bebedo.com/?keywords=Yoga"}

  92. 格式:
  93. {{!it.uri}}

  94. 区域:<div id="encode"></div>

  95. 模板:
  96. <script id="encodetmpl" type="text/x-dot-template">
  97. Visit {{!it.uri}} {{!it.html}}
  98. </script>

  99. 调用方式:

  100. var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
  101. var EncodeText = doT.template($("#encodetmpl").text());
  102. $("#encode").html(EncodeText(dataEncode));




  103. 例子六:

  104. 6、{{# }} for compile-time evaluation/includes and partials
  105. {{## #}} for compile-time defines

  106. 数据源:{"name":"Jake","age":31}

  107. 区域:<div id="part"></div>

  108. 模板:

  109. <script id="parttmpl" type="text/x-dot-template">
  110. {{##def.snippet:
  111. <div>{{=it.name}}</div>{{#def.joke}}
  112. #}}
  113. {{#def.snippet}}
  114. {{=it.html}}
  115. </script>

  116. 调用方式:

  117. var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
  118. var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
  119. var partText = doT.template($("#parttmpl").text(), undefined, defPart);
  120. $("#part").html(partText(dataPart));
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-10-17 06:40 , Processed in 0.121552 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表