数据插入
{{= }} for interpolation //插入
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<div id="interpolationt"></div>
<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ''}}</div>
</script>
<script>
var dataInter = { "name": "Jake", "age": 31 };
// console.log(document.getElementById('interpolationtmpl').innerHTML);
// console.log(document.getElementById('interpolationtmpl').innerText);
// console.log(document.getElementById('interpolationtmpl').textContent);
var interText = doT.template(document.getElementById('interpolationtmpl').innerHTML);
document.querySelector("#interpolationt").innerHTML = interText(dataInter);
</script>
</body>
</html>
求值
{{ }} for evaluation //求值
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<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>
<script>
var dataEval = {
"name": "Jake", "age": 31, "interests": ["basketball", "hockey", "photography"],
"contact": { "email": "jake@xyz.com", "phone": "999999999" }
};
var evalText = doT.template(document.getElementById('evaluationtmpl').innerHTML);
document.querySelector("#evaluation").innerHTML = evalText(dataEval);
</script>
</body>
</html>
数组循环迭代
{{~ }} for array iteration //数组循环迭代
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<div id="arrays"></div>
<script id="arraystmpl" type="text/x-dot-template">
{{~it.array:value:index}}
<div>{{= index+1 }}{{= value }}!</div>
{{~}}
</script>
<script>
var dataArr = { "array": ["banana", "apple", "orange"] };
var arrText = doT.template(document.getElementById('arraystmpl').innerHTML);
document.querySelector("#arrays").innerHTML = arrText(dataArr);
</script>
</body>
</html>
条件表达式
{{? }} for conditionals 条件
{{? }} if
{{?? 表达式}} else if
{{??}} else
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<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>
<script>
var conditionData = { "name": "Jake", "age": 31 };
var ConditionText = doT.template(document.getElementById('conditionstmpl').innerHTML);
document.querySelector("#condition").innerHTML = ConditionText(conditionData);
//相当于if elseif else
</script>
</body>
</html>
编码
{{! }} for interpolation with encoding //编码
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<div id="encode"></div>
<script id="encodetmpl" type="text/x-dot-template">
Visit {{!it.uri}} {{!it.html}}
</script>
<script>
var dataEncode = {
"uri": "http://jq22.com/?keywords=Yoga",
"html": "<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"
};
var EncodeText = doT.template(document.getElementById('encodetmpl').innerHTML);
document.querySelector("#encode").innerHTML = EncodeText(dataEncode);
</script>
</body>
</html>
用于编译时评估/包含和部分
{{# }} for compile-time evaluation/includes and partials //编译时解析
{{## #}} for compile-time defines //编译时定义
案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dot.js学习</title>
<script src="https://cdn.bootcdn.net/ajax/libs/dot/1.1.3/doT.js"></script>
</head>
<body>
<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>
<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(document.getElementById('parttmpl').innerHTML, undefined, defPart);
document.querySelector("#part").innerHTML = partText(dataPart);
</script>
</body>
</html>
参考
https://www.jianshu.com/p/7e10eee175d4
官方文档
源代码
