前提：引入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. pipeline脚本管理

    目录 一.代码仓库 二.远程拉取 一.代码仓库 1.使用gitlab做pipeline脚本的存储,新建一个仓库 2.新建文件,把代码放进去 脚本名可以按照规律填写,环境_应用名_类型,例如:test_ ...

  2. 『学了就忘』Linux系统管理 — 81、进程管理介绍

    目录 1.进程与线程的概念 2.什么是进程管理 3.进程管理的作用 4.Linux进程的几种状态 5.进程与线程的关系 (1)线程与进程的关系 (2)总结 1.进程与线程的概念 来源百度百科: 进程( ...

  3. 一文详解 OpenGL ES 纹理颜色混合

    在OpenGL中绘制的时候,有时候想使新画的颜色和已经有的颜色按照一定的方式进行混合.例如:想使物体拥有半透明的效果,或者绘制叠加光亮的效果,这时候就需要用到OpenGLES混合. 如上图所示,为石头 ...

  4. Docker从入门到精通（六）——容器通信

    想要变成 Docker 的高阶玩家,搞懂 Docker 的容器通信是必不可少的. 1.需求 通常一个 Web 项目上线,我们会把开发完成的服务部署在Tomcat 服务器里面,然后需要的持久化数据会存放 ...

  5. centos使用docker安装clickhouse

    拉取镜像 docker pull yandex/clickhouse-server:20.3.12.112 启动 docker run -d --name=clickhouse-server -p 8 ...

  6. 【LeetCode】345. Reverse Vowels of a String 解题报告（Java & Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用栈 双指针 日期 [LeetCode] 题目地址 ...

  7. 【LeetCode】516. Longest Palindromic Subsequence 最长回文子序列

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 代码 刷题心得 日期 题目地址:https://le ...

  8. 从头造轮子：python3 asyncio 之 run（2）

    前言 书接上文,本文造第二个轮子,也是asyncio包里面非常常用的一个函数run 一.知识准备 ● 相对于run_until_complete,改动并不大,就是将入口函数重新封装了一下,基础知识主要 ...

  9. Improving Adversarial Robustness Using Proxy Distributions

    目录 概 主要内容 proxy distribution 如何利用构造的数据 Sehwag V., Mahloujifar S., Handina T., Dai S., Xiang C., Chia ...

  10. Least Angle Regression

    目录 引 一些基本的假设 LARS算法 算法 与别的方法结合 LARS与LASSO的关系 LARS 与 Stagewise 代码 Efron B, Hastie T, Johnstone I M, e ...