doT.js 模板引擎的小白基础

ekinger

      doT.js作为模板引擎，主要的用途就是在写好的模板上，放进数据，生成含有数据的html代码。

1、在模板中，it这个变量，就是传递进去的数据对象，类似英文的items的意思；

2、doT.template(template)(obj) 解释：把模板template，作为参数传入doT.template()方法，doT会把模板处理一下，然后你再把数据对象传入，返回值就是html与数据一起生成的html代码了，再拼接到页面即可；

3、在模板中，{{   }}包裹的内容，就是javascript代码，doT会负责处理。

【实例】

HTML部分：
1.  <script id="j-tmpl" type="text/template">2.  {{    if(it.success){    }}
3.          <h2>results:</h2>
4.          <ul>
5.          {{    for (var i=0,l=it.data.length; i < l; i++) {     }}
6.                     <li>
7.                     <h5> {{  =it.data.title   }} </h5>
8.                     <p>  {{  !it.data.message }} </p>
9.                     </li>
10.                   {{  }  }}
11.         <ul>
12. {{     }else{     }}
13.        <h2> 暂无数据 </h2>
14. {{     }    }}
15. </script>
JS部分：
1.   <script>
2.   var obj = {
3.              success: true,
4.              data:[
5.                      {title:'item1',message:11},
6.                      {title:'item1',message:22}

8.            }
9.   var tmpl = document.getElementById('j-tmpl').innerHTML;
10. var doTtmpl = doT.template(tmpl);
11. console.log(doTtmpl(obj));
12. </script>

易大师

js模板引擎很多，文档也都很详细。