模板引擎dot.js

一、基本符号

{{= }} for interpolation  //插入
{{ }} for evaluation  //求值
{{~ }} for array iteration //数组循环迭代
{{? }} for conditionals //条件
{{! }} for interpolation with encoding //编码
{{# }} for compile-time evaluation/includes and partials //编译时间
{{## #}} for compile-time defines 

二、调用方式

var tmpText = doT.template(模板);
tmpText(数据源);

三、实例

• 实例1

for interpolation 赋值

格式：
{{= }}

1. 数据源：

{"name":"Jake","age":31}

2. 区域:

3. 模板：

4. 调用方式：

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

• 实例2

for evaluation for in 循环

1. 格式：

{{ for var key in data { }} 
{{= key }} 
{{ } }}

2. 数据源：

{"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"
contact":{"email":"[email protected]","phone":"999999999"}}

c

4. 模板：

5.调用方式：

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

• 实例3

for array iteration 数组

1. 格式：

{{~data.array :value:index }}
    ...
{{~}}

2. 数据源：

{"array":["banana","apple","orange"]}

3. 区域：

4. 模板：

5.调用方式：

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

• 实例4

{{? }} for conditionals 条件

1. 格式：

{{? }} if
{{?? }} else if
{{??}} else

2. 数据源：

{"name":"Jake","age":31}

3. 区域：

4. 模板：

5.调用方式：

var dataEncode = {"uri":"http://jq22.com/?keywords=Yoga",
"html":"
html元素
"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

• 实例5

for interpolation with encoding

1. 格式：

{"uri":"[http://jq22.com/?keywords=Yoga](http://jq22.com/?keywords=Yoga)"}

2. 数据源：

{{!it.uri}}

3. 区域：

4. 模板：

5.调用方式：

var dataEncode = {"uri":"http://jq22.com/?keywords=Yoga",
"html":"
html元素
"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

{{# }} for compile-time evaluation/includes and partials

{{## #}} for compile-time defines

1. 数据源：

{"name":"Jake","age":31}

2. 区域：

3. 模板：

4.调用方式：

var dataPart = {"name":"Jake","age":31,"html":"
html元素
"};
var defPart = {"joke":"
{{=it.name}} who?
"};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));