案例一：
<html>
<head>
<script id="headertmpl" type="text/x-dot-template">
<h1>{{=it.title}}</h1>
</script>
<script id="pagetmpl" type="text/x-dot-template">
<h2>Here is the page using a header template</h2>
{{#def.header}}
{{=it.name}}
</script>
<script id="customizableheadertmpl" type="text/x-dot-template">
{{#def.header}}
{{#def.mycustominjectionintoheader || ''}}
</script>
<script id="pagetmplwithcustomizableheader" type="text/x-dot-template">
<h2>Here is the page with customized header template</h2>
{{##def.mycustominjectionintoheader:
<div>{{=it.title}} is not {{=it.name}}</div>
#}}
{{#def.customheader}}
{{=it.name}}
</script>
<script src="../doT.min.js" type="text/javascript"></script>
</head>
<body>
<div id="content"></div>
<div id="contentcustom"></div>
</body>
<script type="text/javascript">
var def = {
header: document.getElementById('headertmpl').text,
customheader: document.getElementById('customizableheadertmpl').text
};
var data = {
title: "My title",
name: "My name"
};
var pagefn = doT.template(document.getElementById('pagetmpl').text, undefined, def);
document.getElementById('content').innerHTML = pagefn(data);
pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, undefined, def);
document.getElementById('contentcustom').innerHTML = pagefn(data);
</script>
</html>
案例二：
// 实际应该展示在页面上的Dom <div id="interpolation"></div> // 模版 <script id="interpolationtmpl" type="text/x-dot-template"> <!-- 新增用户弹窗 --> <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;"> <div class="q-popup-modal modal-dialog" style=" 900px;background-color: #ffffff;"> <div class="popup-header modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> {{? it.data && it.data.id}} 更新计划 {{??}} 新增计划 {{?}} </div> </div> </div> </script> // 编译和渲染 jQuery.ajax({ type: "get", url: "http://", dataType: "json", success: function (result) { if (result && "0" == result.code && result.json) { var template = doT.template($("#interpolationtmpl").text()); // 将模版编译成函数 var rs = template(result.json); // 使用数据渲染 $("#interpolation").html(rs); // 添加进之前准备好的Dom } } });