doT.js使用方法

http://olado.github.io/doT/index.html

1、interpolation 显示插入值

Template:

<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>

相当于方法：

function anonymous(it) 
{
   var out='<div>Hi '+(it.name)+'!</div><div>'+(it.age || '')+'</div>';
   return out;
}

需要的数据格式：

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

结果：

<div>Hi Jake!</div><div>31</div>

2、evaluation循环

Template:

{{ for(var prop in it) { }}
<div>{{=prop}}</div>
{{ } }}

需要的数据格式：

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

结果：

<div>name</div><div>age</div><div>mother</div><div>father</div><div>interests</div><div>contact</div>

 3、partials 局部模板

Template:

{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}

{{#def.snippet}}

 

4、conditinals条件

Template:

{{? it.name }}
<div>Oh, I love your name, {{=it.name}}!</div>
{{?? it.age === 0}}
<div>Guess nobody named you yet!</div>
{{??}}
You are {{=it.age}} and still don't have a name?
{{?}}

 

相当于：

function anonymous(it)
 { 
  var out='';
  if(it.name)
   {
    out+='<div>Oh, I love your name, '+(it.name)+'!</div>';
   }
    else if(it.age === 0)
   {
    out+='<div>Guess nobody named you yet!</div>';
   }
   else
   {
    out+='You are '+(it.age)+' and still don\'t have a name?';
   }
   return out;
 }

 

5、arrays数组
Template:

{{~it.array :value:index}}
<div>{{=value}}!</div>
{{~}}

 

相当于：

function anonymous(it) 
{ 
 var out='';
 var arr1=it.array;
 if(arr1)
 {
  var value,index=-1,l1=arr1.length-1;
  while(index<l1)
  {
    value=arr1[index+=1];
    out+='<div>'+(value)+'!</div>';
  }
} 
 return out; 
}

 

要求数据格式：

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

 

6、encode编码

Templage:

Visit {{!it.uri}}

 

相当于：

function anonymous(it)
 {
   var encodeHTML = 
   typeof _encodeHTML !== 'undefined' ? _encodeHTML : (function (b)
{var a={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/"},d=b?/[&<>"'\/]/g:/&(?!#?\w+;)|<|>|"|'|\//g;return function(b){return b? b.toString().replace(d,function(b){return a[b]||b}):""}}());var out='Visit '+encodeHTML(it.uri);return out; }

 

Data:

{"uri":"https://github.com/olado/doT"}

 

Result:

Visit https://github.com/olado/doT