[绍棠]doT.js

官网：

https://github.com/olado/doT

渲染ajax请求

var ajax_ = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');

ajax_.open('get', 'http://192.168.1.47:3000/useing/public', true);

get 请求方式 post get....

ajax_.send();

ajax_.onreadystatechange = function () {

    if (ajax_.readyState == 4 && ajax_.status == 200) {

        var data = ajax_.responseText;

        // 2.找数据源

        data = JSON.parse(data); //改为数组形式

        var innerT = doT.template(document.getElementById('first_').innerText); //生成模板方法

first_ 所连接渲染的js代码类名

        // console.log(innerT(data.list))

  document.getElementById('get_').innerHTML = innerT(data);

//数据渲染

get_ 要渲染页面位置的父级元素

 

调用方式：

var dataInter = {"name":"Jake","age":31};

var interText = doT.template($("#interpolationtmpl").text());

$("#interpolation").html(interText(dataInter));

{{~}}循环数组

{{~it:value:index}}

•  

 

{{=value.price_rob_sign}}

{{=value.price_rob_num}}

{{=value.price_rob_tail}}

{{=value.price_price_r_sign}}

{{=value.price_price_r_num}}

{{=value.price_price_r_tail}}

{{~}}

例子二：

2、for evaluation for in 循环

格式：

{{ for var key in data { }}

{{= key }}

{{ } }}

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

区域：

模板：

 

调用方式：

var dataEval = {"name":"Jake","age":31,"interests":["basketball","hockey","photography"],"contact":{"email":"jake@xyz.com","phone":"999999999"}};

var evalText = doT.template($("#evaluationtmpl").text());

$("#evaluation").html(evalText(dataEval));

{{for(var i in it){}}

    

•  

       {{=it[i].info_ty}}

       

 

       

{{=it[i].text}}

       {{=it[i].totalnum}}

{{=it[i].num}}台

       

 

          {{=it[i].apply}}申请

       

剩余时间2天

     

{{}}}

例子三：

3、for array iteration 数组

格式：

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

...

{{~}}

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

区域：

模板：

 

调用方式：

var dataArr = {"array":["banana","apple","orange"]};

var arrText = doT.template($("#arraystmpl").text());

$("#arrays").html(arrText(dataArr));

例子四：

4、{{? }} for conditionals 条件

格式：

{{? }} if

{{?? }} else if

{{??}} else

{{? }} 结尾

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

区域：

模板：

 

调用方式：

var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"

html元素

"};

var EncodeText = doT.template($("#encodetmpl").text());

$("#encode").html(EncodeText(dataEncode));

判断（条件渲染）

{{?it[i].info_ty=='体验师转享'}}

      {{=it[i].info_ty}}

{{??}}

      {{=it[i].info_ty}}

{{?}}

例子五：

5、for interpolation with encoding 用于带编码的插值

数据源：{"uri":"http://bebedo.com/?keywords=Yoga"}

格式：

 {{!it.uri}}

区域：

模板：

 

调用方式：

var dataEncode = {"uri":"http://bebedo.com/?keywords=Yoga","html":"

html元素

"};

var EncodeText = doT.template($("#encodetmpl").text());

$("#encode").html(EncodeText(dataEncode));

例子六：

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

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

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

区域：

模板：

 

调用方式：

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));