前提：引入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>

doT.js模板用法的更多相关文章

  1. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  2. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  3. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  4. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  5. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  6. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  7. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  8. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  9. dot.js模板实现分离式

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

随机推荐

  1. Redis持久化 aof和rdb的原理配置

    目录 一.介绍 二.RDB持久化(全量写入) rdb原理 rdb模式 rdb触发情况 rdb优势和劣势 rdb文件配置 rdb命令配置 rdb数据恢复 三.AOF持久化(增量写入) aof原理 aof ...

  2. pipeline 共享库

    目录 一.简介 二.共享库扩展 共享库使用 共享库结构 pipeline模板 一些小问题 三.共享库例子 使用公共变量 使用共享库的src方法 使用共享库的vars方法 四.插件实现pipeline ...

  3. 虚拟机+OS系统安装+Xshell

    安装虚拟机 1.先下载好VMware Workstation.exe的安装包(最好直接下载破解版(非最新版) 在此私人网址不公布 可直接百度 资源很多) 2.直接下一步 直到安装完成(注意最好不要装在 ...

  4. AcWing422. 校门外的树

    题目: 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米. 我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,--,L,都种 ...

  5. 使用docker创建含有FFmpeg的自定义镜像

    Dockerfile文件 FROM openjdk:8-jre-alpine MAINTAINER "yvioo" RUN echo "http://mirrors.al ...

  6. Spring Boot中yml配置文件Map集合注入及使用方式

    yml配置文件 maps: "{key1: 'value1', key2: 'value2'}" java中 @Value("#{${maps}}") priv ...

  7. JAVA获取多个经纬度的中心点

    import java.util.LinkedList; public class Test1 { /** * 位置实体类,根据自己的来即可 */ static class Position{ /** ...

  8. 【LeetCode】1151. Minimum Swaps to Group All 1's Together 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 滑动窗口 日期 题目地址:https://leetco ...

  9. 【九度OJ】题目1028：继续畅通工程 解题报告

    [九度OJ]题目1028:继续畅通工程 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1028 题目描述: 省政府" ...

  10. CODEFORCEs 621E. Wet Shark and Blocks

    E. Wet Shark and Blocks time limit per test 2 seconds memory limit per test 256 megabytes input stan ...