dot模板引擎

基本模板

<!-- 预留容器 -->
    <div id="content"></div>
    <!-- 渲染模板 --> 
    <script id="tpl">
        {{=it.name}}
        {{=it.age}}
    </script>
     <script src="doT.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 数据
        var data = {'name':'xiao','age':18};
        // 获取模板
        var tmp = doT.template($('#tpl').text());
        // 把模板加入数据渲染到预留容器中
        $('#content').html(tmp(data));
    </script>

for 循环渲染

{{=it[key]}} 等号前后不能有空格
   <div id="content"></div>
    <script id="tpl" type="text/x-dot-template">
       {{ for(var prop in it) { }}
        <div>key:{{=prop}}</div>
        <div>value:{{=it[prop]}}</div>
    {{}}}
    </script>
       <script src="doT.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var data = {
        "name":"Jake",
        "age":31,
        "interests":["basketball","hockey","photography"],"contact":{"email":"122@123.com","phone":"999999999"}
       };
       var templ = doT.template($('#tpl').text());
       $('#content').html(templ(data));
    </script>

数组渲染

<div id="content"></div>
    <script id="tpl" type="text/x-dot-template">
     {{~it.array:value:index}}
     <div>{{=indx+1}}{{value}}</div>
     {{~}}
    </script>
   <script>
        var data = {"array":["a","b","c"]};
       var templ = doT.template($('#tpl').text());
       $('#content').html(templ(data));
    </script>

条件渲染

<div id="content"></div>
    <script id="tpl" type="text/x-dot-template">
{{? !it.name}}
没有名字数据
{{?? it.name}}
你的名字为{=it.name{}}
{{?}}