前提：引入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. 《手把手教你》系列技巧篇（五十）-java+ selenium自动化测试-字符串操作-上篇（详解教程）

    1.简介 自动化测试中进行断言的时候,我们可能经常遇到的场景.从一个字符串中找出一组数字或者其中的某些关键字,而不是将这一串字符串作为结果进行断言.这个时候就需要我们对字符串进行操作,宏哥这里介绍两种 ...

  2. DIgSILENT PowerFactory 15.1.7 破解过程

    将dll文件复制到安装路径下:

  3. Android系统编程入门系列之硬件交互——多媒体展示

    前两篇文章通过麦克风硬件和摄像头硬件分别采集音频和视频的多媒体数据,在得到的多媒体数据通常是以编码文件的格式存储,在用户需要展示时,可通过设备的内置扩音器或蓝牙耳机等硬件播放音频,通过设备的显示屏或外 ...

  4. 显卡不是你学习 Deep Learning 的借口

    显卡不是你学习 Deep Learning 的借口 很多人在学习深度学习的时候会以自己没有 RTX N 卡的理由不动手实操,只满足于看看"娱乐"视频,听几节基础知识.当然,如果只是 ...

  5. 预算（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 预算是件重要的事,不然银几一花没边了,那结果可是要牺牺的(以下省略具体描述9^323字) 在Project里做预算,步骤不 ...

  6. CF1080A Petya and Origami 题解

    Content 小 P 想给 \(n\) 位朋友各发一张邀请函,每张邀请函需要耗费 \(2\) 张红色纸,\(5\) 张绿色纸和 \(8\) 张蓝色纸.商店里面的纸是一堆一堆卖的,每堆里面有 \(k\ ...

  7. 针对HttpClient 重写 HttpRequestRetryHandler针对特定异常 增加重试

    调用方法: public static String doGet(String url) { try { RequestConfig defaultRequestConfig = RequestCon ...

  8. ts 遇到的问题

    1. Property 'generatePdf' does not exist on type 'Element'. 问题:ts类型校验报错,使得编译失败 解决方法:将报错字段定义为any类型

  9. AcWing 1204. 错误票据

    题目: 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号. 全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处错误,造成 ...

  10. Android 控件使用教程（三）—— NineGridImageView 九宫格展示图片

    引子 上文降到RecyclerView的使用,确实非常方便易用,而且样式多样,很灵活.但在图像展示时,经常有朋友圈和微博等9张图以内的图片展示需求,这时候,不是一个可以无限下滑的RecyclerVew ...