doT.js 模板引擎的使用

模版引擎之前在介绍mustache时已经提到了。doT、mustache各有优势吧，如果用于JS环境，doT的性能更胜一筹，并且套语句更方便些。现在公司的mobile页面已经被我替换成doT了。

doT source: https://github.com/olado/doT
Docs: http://olado.github.com/doT/

doT上手比较容易，但之前熟悉了mustache，改用doT时有点不习惯，但用两次就好了。

下载doT.js（里面有个doU.js不要用，doU.js是为了测试遗留问题的）。举个简单的使用例子：

HTML部分：

   
   
   
   

    
    
    
    
<script id="J_tmpl" type="text/template">

    
    
    
    
{{ if(it.success){ }}

    
    
    
    
        <h2>results:</h2>

    
    
    
    
        <ul>

    
    
    
    
                {{ for (var i = 0, l = it.data.length; i < l; i++) { }}

    
    
    
    
                        <li>

    
    
    
    
                                <h5>{{=it.data[i].title}}</h5>

    
    
    
    
                                <p>{{!it.data[i].message}}</p>

    
    
    
    
                        </li>

    
    
    
    
                {{ } }}

    
    
    
    
        <ul>

    
    
    
    
{{ }else{ }}

    
    
    
    
        <h2>暂无数据</h2>

    
    
    
    
{{ } }}

    
    
    
    
</script>
   
   
   
   

JS部分：

   
   
   
   

    
    
    
    
<script>

    
    
    
    
var obj = {

    
    
    
    
        success: true,

    
    
    
    
        data:[

    
    
    
    
                {title:'item1',message:11},

    
    
    
    
                {title:'item1',message:22}

    
    
    
    
        ]

    
    
    
    
}

    
    
    
    
var tmpl = document.getElementById('J_tmpl').innerHTML;

    
    
    
    
var doTtmpl = doT.template(tmpl);

    
    
    
    
console.log(doTtmpl(obj ));

    
    
    
    
</script>
   
   
   
   

看了例子，就应该会使用了。
{{=it.xx}} 取obj.xx的值
{{ }} 里面放if els / for 等表达式
{{!it.xx}} 取把obj.xx转义后的值
这些基本够用了，还有复杂的应用，可以看doT主页内的examples、docs。
并且，可以很容易把doT写成jquery插件：

   
   
   
   

    
    
    
    
$.extend({

    
    
    
    
tmpl: function(template, view){

    
    
    
    
        return doT.template(template).apply(null,[view]);

    
    
    
    
}

    
    
    
    
});