dot.js简单介绍、教程文档（含示例）api-资讯-VirPlus

dot.js简单介绍、教程文档（含示例）api教程 Server Html

印迹发布于：2019-2-4 1193

dot.js是一个短小精悍的js模板引擎，压缩版仅有4K大小

官网：http://olado.github.com/doT

doT.js特点是快，小，无依赖其他插件。

使用方法：

{{= }} for 赋值
{{ }} for evaluation
{{~ }} for for循环数组
{{? }} for if判断
{{! }} for html标签是否转义
{{# }} for compile-time evaluation/includes and partials
{{## #}} for compile-time defines

dot.js调用方式：

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

dot.js读取单个js对象

数据：{name:"张三",age:"24",sex:"男"}

<!--直接读取单个对象数据-->
        <script id="tpl1" type="text/dot-tpl">
            <table>
                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
                <tr><td>{{= it.name}}</td><td>{{= it.age}}</td><td>{{= it.sex||"暂无"}}</td></tr>
            </table>
        </script>
        <script>
            var data1 = {name:"张三",age:"24",sex:"男"};
            var tpl1= doT.template( $id("tpl1").innerHTML );
            console.log("读取单个对象数据："+tpl1(data1) );
        </script>

jquery特效整理

dot.js遍历js数组（for循环）

数据：[["张三","24","男"],["李四","30","女"]]，当然这里改成外面是数组里面是对象也可以，如：[{name:"张三"},{name:"李四"},...]当然这个时候模板中就要用如：{{= it[index].name}}取值了

<!--读取数组数据-->
        <script id="tpl2" 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>
        <script>
            var data2 = [["张三","24","男"],["李四","30","女"]];
            var tpl2= doT.template( $id("tpl2").innerHTML );
            console.log("读取数组数据："+tpl2(data2) );
        </script>

dot.js遍历js对象，（for in）

数据：{"001":{name:"张三",age:"24",sex:"男"},"002":{name:"李四",age:"26",sex:"男"}}

<!--读取数组数据-->
        <script id="tpl3" type="text/dot-tpl">
            <table>
                <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
                {{ for(var key in it) { }}
                <tr><td>{{= key}}:{{= it[key].name }}</td><td>{{= it[key].age }}</td><td>{{= it[key].sex }}</td></tr>
                {{  } }}
            </table>
        </script>
        <script>
            var data3 = {"001":{name:"张三",age:"24",sex:"男"},"002":{name:"李四",age:"26",sex:"男"}};
            var tpl3= doT.template( $id("tpl3").innerHTML );
            console.log("遍历js对象："+tpl3(data3) );
        </script>
        <p><a href="http://www.virplus.com/">www.virplus.com</a></p>

例子一：for interpolation 赋值

格式：{{= }}
数据源：{"name":"Jake","age":31}
区域:<div id="interpolation"></div>
模板：
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
调用方式：
var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));

例子二：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"}}
区域：<div id="evaluation"></div>
模板：
<script id="evaluationtmpl" type="text/x-dot-template">
{{ for(var prop in it) { }}
<div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>
{{ } }}
</script>
调用方式：
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 array iteration 数组

格式：
{{~data.array :value:index }}
...
{{~}}
数据源:{"array":["banana","apple","orange"]}
区域：<div id="arrays"></div>
模板：
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>
调用方式：
var dataArr = {"array":["banana","apple","orange"]};
var arrText = doT.template($("#arraystmpl").text());
$("#arrays").html(arrText(dataArr));

例子四：{{? }} for conditionals 条件

格式：
{{? }} if
{{?? }} else if
{{??}} else
数据源：{"name":"Jake","age":31}
区域：<div id="condition"></div>
模板：
<script id="conditionstmpl" type="text/x-dot-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 dont have a name?
{{?}}
</script>
调用方式：
var dataEncode = {"uri":"http://www.virplus.com/search.htm?keyword=offers","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

例子五：for interpolation with encoding

数据源：{"uri":"http://www.virplus.com/search.htm?keyword=offers"}
格式：
 {{!it.uri}}
区域：<div id="encode"></div>
模板：
<script id="encodetmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{!it.html}}
</script>
调用方式：
var dataEncode = {"uri":"http://www.virplus.com/search.htm?keyword=offers","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var EncodeText = doT.template($("#encodetmpl").text());
$("#encode").html(EncodeText(dataEncode));

例子六：

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

数据源：{"name":"Jake","age":31}
区域：<div id="part"></div>
模板：
<script id="parttmpl" type="text/x-dot-template">
{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}
{{=it.html}}
</script>
调用方式：
var dataPart = {"name":"Jake","age":31,"html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};
var defPart = {"joke":"<div>{{=it.name}} who?</div>"};
var partText = doT.template($("#parttmpl").text(), undefined, defPart);
$("#part").html(partText(dataPart));

--------------------------------------------------------

http://www.virplus.com/thread-69.htm

转载请注明:2019-2-4 于 VirPlus 发表

dot.js简单介绍、教程文档（含示例）api教程ServerHtml