前提：引入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. 利用 clip-path 实现动态区域裁剪

    背景 今天逛 CodePen,看到了这样一个非常有意思的效果: CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学 ...

  2. LuoguP6861 [RC-03] 难题 题解

    Update \(\texttt{2020.10.21}\) 删除了不需要的 \(n=1\) 的特判,并在符号与字母之间添加了空格. Content 给定一个数 \(n\),试找到一对数 \(a,b( ...

  3. CF535A Tavas and Nafas 题解

    Content 请输出整数 \(s\) 的英文写法. 数据范围:\(0\leqslant s\leqslant 99\). Solution 直接对应打表即可. 当 \(0\leqslant s\le ...

  4. JAVA根据URL生成二维码图片、根据路径生成二维码图片

    引入jar包 zxing-2.3.0.jar.IKAnalyzer2012_u6.jar 下载地址:https://yvioo.lanzous.com/b00nlbp6h                ...

  5. Android中Log信息的输出方法

    第一步:在对应的mk文件中加入:LOCAL_LDLIBS:= -llog第二步:在要使用LOG的cpp文件中加入:#include <android/log.h>#define LOGD( ...

  6. 【LeetCode】1. Two Sum 两数之和

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:two sum, 两数之和,题解,leetcode, 力 ...

  7. 【LeetCode】926. Flip String to Monotone Increasing 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Prefix计算 动态规划 参考资料 日期 题目地址 ...

  8. 【kafka学习笔记】PHP接入kafka

    安装扩展 # 先安装rdkfka库文件 git clone https://github.com/edenhill/librdkafka.git 或者: wget https://gitee.com/ ...

  9. 从零搭建react hooks项目(github有源代码)

    前言 首先这是一个react17的项目,包含项目中常用的路由.状态管理.less及全局变量配置.UI等等一系列的功能,开箱即用,是为了以后启动项目方便,特地做的基础框架,在这里分享出来. 这里写一下背 ...

  10. MySQL 中的共享表空间与独立表空间

    对于 InnoDB 存储引擎来说,它可以将每张表存放于独立的表空间,即tablename.ibd 文件:也可以将数据存放于 ibdata 的共享表空间,一般命名是 ibdataX,后面的 X 是一个具 ...