doT.js模板用法

前提：引入doT.min.js：

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

(1)、基本用法{{=it.attr}}

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">//模板存放区域 修改type类型，以免会被解析成js
    <p>
        <span>姓名：{{=it.name}}</span>
    </p>
</script>

<script>
    var testjson={
    "name":"张三"
    },
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(2)、循环数组用法{{~}}

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
        <li>
        <span>姓名：{{=value.name}}</span>
        </li>
        {{~}}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"fun":"吃东西"}
    ],
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(3)、条件判断{{？}}{{？？}}, 就是(if else if)

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?!value.age}}
                <li>
                    <span>姓名：{{=value.name}}</span>
                    <span>年龄：年龄数据缺失</span>
                    <span>爱好：{{=value.fun}}</span>
                </li>
            {{??!value.fun}}
                <li>
                    <span>姓名：{{=value.name}}</span>
                    <span>年龄：{{=value.age}}</span>
                    <span>爱好：无趣的人</span>
                </li>
            {{??}}
                <li>
                    <span>姓名：{{=value.name}}</span>
                    <span>年龄：{{=value.age}}</span>
                    <span>爱好：{{=value.fun}}</span>
                </li>
            {{?}}
        {{~}}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"fun":"吃东西"},
        {"name":"李四","fun":"上网"},
        {"name":"王五","age":70}
    ],
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(4)、编码渲染{{!}}

主要是为了防止代码注入以保障安全，如传入一个HTML片段或js片段，它会以字符串的形式渲染

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
                <li>
                    <span>姓名：{{=value.name}}</span>
                    <span>年龄：{{=value.age}}</span>
                    <span>爱好：{{!value.html}}</span>
                </li>
            {{??}}
                <li>
                    <span>姓名：{{=value.name}}</span>
                    <span>年龄：{{=value.age}}</span>
                    <span>爱好：{{=value.html}}</span>
                </li>
            {{?}}
        {{~}}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(5)、支持共用模块定义{{##def.}}定义，{{#def.}}引用模块

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{??}}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{?}}
        {{~}}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

注：模块定义也可以一个json数据定义，再在生成模板函数函数的时候传入即可，示例如下，其中tmpljson就是在外面以json定义的模块：

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz===true}}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{??value.bz===false}}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{??}}
                <!-- 引用传入的模块 -->
                {{#def.testmode}}
            {{?}}
        {{~}}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
        {"name":"李四","age":24,"html":"<b>哈哈</b>"}
    ],
    tmpljson={"testmode":"<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span></li>"}//以json格式定义模块
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,传入了json定义的模块
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(6)、用原生的循环，条件渲染

<div id="testid"></div>

<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{!itz.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{=itz.html}}</span></li>
    #}}
    <ul>
        {{ for(var i=0;i<it.length;i++){ }}
            {{ var itz=it[i]; }}
            {{ if(itz.bz){ }}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{ }else{ }}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{ } }}
        {{ } }}
    </ul>
</script>

<script>
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],
    tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

(7)、嵌套循环（很常用）

<div id="category-goods"></div>

<script id="category-goods-tmpl" type="text/x-dot-template">
    {{~it:item:index}}
    <div class="rxsp">
        <div class="aui-pull-left">
            <h3> {{= item.name }} 【索引： {{= index }} 】</h3>
        </div>
        <a class="aui-pull-right ">
            查看更多
            <span class="aui-iconfont aui-icon-right"></span>
        </a>
    </div>

    <div class="aui-list-item-inner">
        <div class="aui-row aui-row-padded">
            {{~it[index].goods:item:j}}
            <div class="aui-col-xs-6">
                <img src="{{= item.logoimg }}" onclick="">
                <p class="tit">{{= item.name }} </p>
                <div class="aui-info" style="padding-top:0">
                    <div class="aui-info-item">
                        <span class="red">￥{{= item.price }}
                    </div>
                </div>
            </div>
            {{~}}
        </div>
    </div>
    {{~}}
</script>

<script type="text/javascript">
        var goods_list = {
            "list": [{
                    "id": "1",
                    "name": "衣服",
                    "goods": [{
                            "goods_id": "1",
                            "name": "衣服1",
                            "price": "100",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        },
                        {
                            "goods_id": "2",
                            "name": "衣服2",
                            "price": "200",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        }
                    ]
                },
                {
                    "id": "2",
                    "name": "鞋子",
                    "goods": [{
                            "goods_id": "3",
                            "name": "鞋子1",
                            "price": "100",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        },
                        {
                            "goods_id": "4",
                            "name": "鞋子2",
                            "price": "200",
                            "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
                        }
                    ]
                }
            ]
        };
        var evalText = doT.template($("#category-goods-tmpl").html());
        $("#category-goods").html(evalText(goods_list.list));
    </script>