前提：引入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. Jenkins安全加固

    1.jenkins未授权访问 描述 jenkins不当配置可导致未授权访问管理控制台,可以通过脚本命令行执行系统命令.通过该漏洞,可以后台管理服务,通过脚本命令行功能执行系统命令,如反弹shell,w ...

  2. pthread_cond_signal与pthread_cond_wait详解

    转:http://blog.chinaunix.net/uid-11572501-id-3456343.html //pthread_cond_signal 只发信号,内部不会解锁,在Linux 线程 ...

  3. ubuntu 10.04安装和配置Samba

    1. 安装samba服务器 sudo apt-get install samba  //主程序包 sudo apt-get install smbfs  //文件下载挂载工具 2. 创建共享目录 mk ...

  4. Table.FillDown填充Table.Fill…（Power Query 之 M 语言）

    数据源: 任意列中包含空单元格 目标: 将空单元格填充为其上或其下单元格中的内容 操作过程: 选取指定列>[转换]>[填充]>[向下] 选取指定列>[转换]>[填充]&g ...

  5. JAVA日记之mybatis-3一对一,一对多,多对多xml与注解配置

    1.Mybatis多表查询1.1 一对一查询1.1.1 一对一查询的模型用户表和订单表的关系为,一个用户有多个订单,一个订单只从属于一个用户 一对一查询的需求:查询一个订单,与此同时查询出该订单所属的 ...

  6. LuoguP7534 [COCI2016-2017#4] Kartomat 题解

    Content 火车站里头有一个售票机,其键盘可以看作是一个 \(4\times 8\) 的矩阵,其中第一行的前面三个键和最后一行的最后三个键都是 *,剩余的键按照从上到下,从左到右的顺序依次按照 A ...

  7. Mybatis-Plus一键生成代码

    Mybatis-Plus一键生成代码 一.闲言碎语 闲来无事看了看了MP的官网看到一键生成的代码更新了! 整个Ui风格都变了,遂决定瞅一眼新的代码生成器 官网地址~~ 二.引入依赖 新的代码生成只有在 ...

  8. Xftp设置指定记事本（notepad++）打开文件

    右键

  9. MacOS设置终端代理

    前言 国内的开发者或多或少都会因为网络而烦恼,因为一些特殊原因有时候网络不好的时候需要使用代理才能完成对应的操作.原来我一直都是使用斐讯路由器然后刷了梅林的固件,直接在路由器层面设置转发代理,把一些国 ...

  10. 【LeetCode】792. Number of Matching Subsequences 解题报告（Python）

    [LeetCode]792. Number of Matching Subsequences 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://f ...