doT.js 小而快的模板引擎 · Every.js

## **使用示例** > 參考文檔：[http://www.jq22.com/jquery-info8648](http://www.jq22.com/jquery-info8648) > 版本：1.1.1 > 代碼案例來自：[http://www.jq22.com/demo/doT-master20160723/examples/browsersample.html](http://www.jq22.com/demo/doT-master20160723/examples/browsersample.html) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dot</title> <script src="../original/Every.js" type="text/javascript" charset="utf-8"></script> <script src="../original/Require.js" type="text/javascript" charset="utf-8"></script> </head> <body> <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> <div id="content"></div> <div id="contentcustom"></div> <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 doT; Every.use(['dot'], function(dot) { renderTemplate(dot); }); function renderTemplate(doT) { 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> </body> </html> ```