dot.js使用心得

一、dot.js介绍

最近用到的数据模板引擎有很多，今天讲的doT.js也是其中一种。

doT.js的特点是体积小，速度快，并且不依赖其他插件。

官网下载：http://olado.github.io/doT/index.html

二、使用方法

<ul id="list"></ul>  //HTML内容 下面的例子都用这一个html
var Content = [{ID:1,title:'测试1'},{ID:2,title:'测试2'},{ID:3,title:'测试3'}]
//简单封装的方法
dotTemplate('list','listTem',Content)
//id:随意啦，
//type：html/template 或 text/x-dot-template 或 text/template

//常用语法 if for
//1.for 循环
   //JS模板
<script id="listTem" type="html/template">
    {{for(var item in it){ }} //开始for循环
        <li>{{= it[item].list}}</li>
    {{ } }}  //for循环结束
</script>
注意：使用for时 后面的‘{ ’一定要加上，并且一定要有结束语句 {{ } }}
//2.if....else 语句
   //JS模板
<script id="listTem" type="html/template">
    {{for(var item in it){ }}
        {{?(it[item].ID !=1 )}} //? 相当于 if
            <li>{{= it[item].title}}</li>
        {{??}} // ?? 相当于 else
            <li>{{= it[item].ID}}</li>
        {{?}} //if 闭合标签
    {{ } }}
</script>
或者
<script id="listTem" type="html/template">
    {{for(var item in it){ }}
        {{if(it[item].ID !=1 ){ }} //
            <li>{{= it[item].title}}</li>
        {{ }else{ }} //
            <li>{{= it[item].ID}}</li>
        {{ } }} //if 闭合标签
    {{ } }}
</script>

//1、dot模板封装
function dotTemplate(domId, temId, data) {
//temId:模板ID，domId：元素的ID，data:参数
  var dom = document.querySelector('#' + domId) //获取DOM标签
  var tem = document.querySelector('#' + temId).innerHTML; //获取模板内容
  var dot = doT.template(tem); //使用dot语法编译模板
  dom.innerHTML = dot(data); //编译之后的模板插入DOM标签
}