doT模板使用心得

时间：2022-06-12 16:38:36

DoT是一个小巧快速无依赖的JS模板框架:

  • 无依赖, 120 行代码
  • 极其快速
  • 自定义定界符 (custom delimiters)
  • 运行时求值 (runtime evaluation)
  • 运行时插值 (runtime interpolation)
  • 编译时求值 (compile-time evaluation)
  • 支持局部模板
  • 支持条件语句
  • Github源码地址

DoT定界符列表:

  • {{ }} 用于求值(evaluation)
  • {{= }} 用于插值(interpolation)
  • {{! }} 用于编码求值
  • {{# }} 用于编译时求值/引入和局部模板
  • {{## #}} 用于编译时定义
  • {{? }} 条件语句
  • {{~ }} 数组迭代

Demo:

首先需要引入 javascript 文件：

<script type="text/javascript" src="doT.js"></script>

插值/求值模板

模板数据必须使用 it 作为引用

 <script id="pagetmpl" type="text/template">
 <h2>Here is the page using a header template</h2>
 //{{=}}插入值
{{=it.name}}
//{{#}}编译时求值
{{#def.header}}
</script>
    <script type="text/javascript">
//模拟数据
var def = {
 header: document.getElementById('headertmpl').text,
 customheader: document.getElementById('customizableheadertmpl').text
 };
var data = {
 title: "My title",
 name: "My name"
 };
// template()是dot用来编译模板的方法
var pagefn = doT.template(document.getElementById('pagetmpl').text, def);
 pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, def);
// content是自定义模板ID
 document.getElementById('content').innerHTML = pagefn(data); 
</script>
    <body>
<div id="content"></div> 
</body>

数组迭代模板

 <script type="text/template" id='girlList'>
{{~it:value}}
 <li class="item" onclick="console.log('我是:{{=value.nick}}')">
 <img class="item-img" onload="cacheImage(this)" data-url="{{=value.img_url}}" src="{{=value.img_url}}" />
 <p class="name">{{=value.nick}}</p>
 <p class="info">{{=value.age}}岁 &nbsp;&nbsp; {{=value.username}}</p>
 </li>
{{~}}
</script>
    // ret是服务器返回JSON数据
// template()是dot用来编译模板的方法 girlList是自定义模板ID
var resultText = doT.template(girlList.innerHTML)(ret); 
    $('ul').append($api.dom('#dataList'), resultText);

发现一个小东西,使用拼接字符串方式的时候:

    var resultStr = "";
for(var i = 0;i < ret.length; i++){
        resultStr += '<li class="item" onclick="console.log(ret[i])">';
        resultStr += '<img class="item-img" src="'+ ret[i].img_url+'"/>'
        resultStr += '<p class="name">'+ ret[i].nick+'</p>'
        resultStr += '<p class="info">'+ ret[i].age+'岁 &nbsp;&nbsp; '+ ret[i].username+'</p>'
        resultStr += '</li>'
    }

这里的console.log(ret[i])没法执行,因为浏览器编译时onclick方法并不在这个for循环下,ret是undefined,而使用doT模板没有这个问题,可以比较方便的操作数据,

仅供参考,欢迎指正
标签：

相关文章