短小精悍的doT.js

官网网站请猛戳；

doT.js是前端模板引擎，它的特点是快、小、不依赖其他插件。他的主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。

{{ }} for evaluation
{{= }} for interpolation 赋值
{{! }} for interpolation with
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines
{{? }} for conditionals 条件
{{~ }} for array iteration 数组

下面来看几个呆毛：：：：：：

(1)interpolation

interpolation是最简单的赋值，主要语法就是{{= }}，在线看请猛戳这里
来看html部分：

  <div id="demoTnterpolation">
   <div id="demoTnterpolation_1">
       <div>Hi {{=it.name}}!小可爱</div>
      <div>今年只有{{=it.age || ''}}岁</div>
   </div>
  </div>

js部分：

var data = {
  "name": "吴琼琼",
  "age": 12
};
var template = document.getElementById('demoTnterpolation_1').innerHTML;
document.getElementById('demoTnterpolation').innerHTML = doT.template(template)(data);

结果往往是令人羞涩的~哈哈哈哈
{{=it.name}}就是取data的name字段，{{=it.age || ”}}就是取data的age字段，若取不到，则为空。

(2)evaluation

evaluation的用法和interpolation的用法差不多，不过不是取值，而是取data的属性字段。继续看个呆毛：
html部分:

  <div id="demoTnterpolation">
    <div id="demoTnterpolation_1">
      {{ for(var prop in it) { }}
      <div>{{=prop}}</div>
      {{ } }}
    </div>
  </div>

js部分:

var data = {
  "name": "吴琼琼",
  "age": 12,
  "mother": "老吴",
  "father": "老边",
  "interests": ["eat", "sleep", "eat"],
  "contact": {
    "email": "amberxixi@163.com",
    "phone": "don't want to tell you"
  }
};
var template = document.getElementById('demoTnterpolation_1').innerHTML;
document.getElementById('demoTnterpolation').innerHTML = doT.template(template)(data);

结果只有data的字段，并没有字段值。想要在线调试请戳这里

(3)partials

html代码

  <div id="part">
    <script id="parttmpl" type="text/x-dot-template">
      {{##def.snippet:
      <div>{{=it.name}}</div>{{#def.joke}} #}} {{#def.snippet}} {{=it.html}}
    </script>
  </div>

js代码

var dataPart = {
  "name": "吴琼琼",
  "age": 12,
  "html": "<div style='background: #999; height: 30px; line-height: 30px;width: 130px;'>html元素</div>"
};
var defPart = {
  "joke": "<div>{{=it.name}} who?</div>"
};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));

结果

前两个demo都是没有引入jq，原生写是为了大家能看清楚，下面的例子，我们就引入jq，方便快捷！请猛戳这里

(4)conditionals 条件

conditionals类似if条件语句if、if…else…
他的格式：
{{? }} if
{{?? }} else if
{{??}} else
html代码

   <div id="condition">
    <script id="conditionstmpl" type="text/x-dot-template">
      {{? !it.name }}
      <div>Oh, I love your name, {{=it.name}}!</div>
      {{?? it.name }} 你是叫{{=it.name}}？
      {{?? !it.age === 0}}
      <div>Guess nobody named you yet!</div>
      {{??}} 你已经{{=it.age}} 怎么看起来像12呢？ {{?}}
    </script>
  </div>

js代码

var dataEncode = {
  "name": "吴琼琼",
  "age": 24
};
var EncodeText = doT.template($("#conditionstmpl").text());
$("#condition").html(EncodeText(dataEncode));

从结果看，{{?? !it.age === 0}} 是没有执行。

(5)array 数组

array数组也很简单
html

<!-- doT array -->
<div id="array">
    <script id="array1" type="text/x-dot-template">
      {{~it.array :value:index}}
      <div>{{=value}}!</div>
      {{~}}
    </script>
  </div>

js部分

var dataEncode = {
  "array": ["banana", "apple", "orange"]
}
var EncodeText = doT.template($("#array1").text());
$("#array").html(EncodeText(dataEncode));

结果就是列出了array里面的值：

在线调试请猛戳这里

综合呆毛

数组+循环+赋值

html代码：

 <div id="composite">
    <script id="composite_1" type="text/dot-tpl">
      <ol>
        {{~ it:value:index}}
        <li>{{= index+1}}:{{= it[index][0]}}</li>
        <li>{{= it[index][1]}}</li>
        <li>{{= it[index][2]||"暂无"}}</li>
        {{~}}
      </ol>
    </script>
  </div>

js代码：

var dataEncode = [
  ["赵", "钱", "孙"],
  ["李", "周", "吴"],
  ["郑", "王", "冯"]
];
var EncodeText = doT.template($("#composite_1").text());
$("#composite").html(EncodeText(dataEncode));

在这个呆毛中，可以看到，将一个包含三个数组的大数组分别遍历出来，在每个数组的第一个值前面加一个序号。在线调试请猛戳

本文是个人关于doT的学习，如有不对请指正，多多交流~