案例一：

<html>

    <head>

    <script id="headertmpl" type="text/x-dot-template">

        <h1>{{=it.title}}</h1>

    </script>

    <script id="pagetmpl" type="text/x-dot-template">

        <h2>Here is the page using a header template</h2>

        {{#def.header}}

        {{=it.name}}

    </script>

    <script id="customizableheadertmpl" type="text/x-dot-template">

         {{#def.header}}

         {{#def.mycustominjectionintoheader || ''}}

     </script>

    <script id="pagetmplwithcustomizableheader" type="text/x-dot-template">

        <h2>Here is the page with customized header template</h2>

        {{##def.mycustominjectionintoheader:

            <div>{{=it.title}} is not {{=it.name}}</div>

        #}}

        {{#def.customheader}}

        {{=it.name}}

    </script>

    <script src="../doT.min.js" type="text/javascript"></script>

    </head>

    <body>

        <div id="content"></div>

        <div id="contentcustom"></div>

    </body>

    <script type="text/javascript">

        var def = {

            header: document.getElementById('headertmpl').text,

            customheader: document.getElementById('customizableheadertmpl').text

        };

        var data = {

            title: "My title",

            name: "My name"

        };

        var pagefn = doT.template(document.getElementById('pagetmpl').text, undefined, def);

        document.getElementById('content').innerHTML = pagefn(data);

        pagefn = doT.template(document.getElementById('pagetmplwithcustomizableheader').text, undefined, def);

        document.getElementById('contentcustom').innerHTML = pagefn(data);

    </script>

</html>

案例二：

// 实际应该展示在页面上的Dom

<div id="interpolation"></div>

// 模版

<script id="interpolationtmpl" type="text/x-dot-template">

    <!-- 新增用户弹窗 -->

    <div id="addSourcePopup" class="modal fade q-popup" tabindex="-1" role="dialog"

         aria-labelledby="myModalLabel" aria-hidden="true" data-child-node-id="q-popup" style="margin-top: 10px;">

        <div class="q-popup-modal modal-dialog" style="width: 900px;background-color: #ffffff;">

            <div class="popup-header modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>

                {{? it.data && it.data.id}}

                更新计划

                {{??}}

                新增计划

                {{?}}

            </div>

        </div>

    </div>

</script>

// 编译和渲染

jQuery.ajax({

     type: "get",

     url: "http://",

     dataType: "json",

     success: function (result) {

     if (result && "" == result.code && result.json) {

          var template = doT.template($("#interpolationtmpl").text()); // 将模版编译成函数

          var rs = template(result.json); // 使用数据渲染

　　　     $("#interpolation").html(rs); // 添加进之前准备好的Dom

        }

     }

 });

doT学习（三）之实战的更多相关文章

  1. Selenium2学习-039-WebUI自动化实战实例-文件上传下载

    通常在 WebUI 自动化测试过程中必然会涉及到文件上传的自动化测试需求,而开发在进行相应的技术实现是不同的,粗略可划分为两类:input标签类(类型为file)和非input标签类(例如:div.a ...

  2. Selenium2学习-018-WebUI自动化实战实例-016-自动化脚本编写过程中的登录验证码问题

    日常的 Web 网站开发的过程中,为提升登录安全或防止用户通过脚本进行黄牛操作(宇宙最贵铁皮天朝魔都的机动车牌照竞拍中),很多网站在登录的时候,添加了验证码验证,而且验证码的实现越来越复杂,对其进行脚 ...

  3. 深度学习之PyTorch实战（1）——基础学习及搭建环境

    最近在学习PyTorch框架,买了一本<深度学习之PyTorch实战计算机视觉>,从学习开始,小编会整理学习笔记,并博客记录,希望自己好好学完这本书,最后能熟练应用此框架. PyTorch ...

  4. 人工智能深度学习框架MXNet实战：深度神经网络的交通标志识别训练

    人工智能深度学习框架MXNet实战:深度神经网络的交通标志识别训练 MXNet 是一个轻量级.可移植.灵活的分布式深度学习框架,2017 年 1 月 23 日,该项目进入 Apache 基金会,成为 ...

  5. Android JNI学习(三)——Java与Native相互调用

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  6. Hadoop学习笔记(8) ——实战 做个倒排索引

    Hadoop学习笔记(8) ——实战 做个倒排索引 倒排索引是文档检索系统中最常用数据结构.根据单词反过来查在文档中出现的频率,而不是根据文档来,所以称倒排索引(Inverted Index).结构如 ...

  7. 2020年深度学习DeepLearning技术实战班

    深度学习DeepLearning核心技术实战2020年01月03日-06日 北京一.深度学习基础和基本思想二.深度学习基本框架结构 1,Tensorflow2,Caffe3,PyTorch4,MXNe ...

  8. HTTP学习三：HTTPS

    HTTP学习三:HTTPS 1 HTTP安全问题 HTTP1.0/1.1在网络中是明文传输的,因此会被黑客进行攻击. 1.1 窃取数据 因为HTTP1.0/1.1是明文的,黑客很容易获得用户的重要数据 ...

  9. Selenium2学习-016-WebUI自动化实战实例-014-Selenium 窗口选择

    在日常的 WebUI 自动化测试脚本编写过程中,经常需要打开新的页面,或者在多个打开的页面之间进行切换,以对页面元素进行相应的操作,以模拟用户的行为,实现 UI 的自动化测试.在过往的时间中,经常有初 ...

  10. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

随机推荐

  1. Python中的不可变对象类型与可变对象类型

    https://blog.csdn.net/answer3lin/article/details/86430074 其实各个标准资料中没有说明Python有值类型和引用类型的分类,这个分类一般是C++ ...

  2. iview之avatar组件

    avatar组件是一个获取网络路径图片的组件 它再vue中使用的话build时不会被打包,路径仍然为原来的路径 所以相对路径不会有效 如下: <Avatar style="margin ...

  3. jsvnadmin访问一直登陆 找不到用户

    报错:AH01618: user zhangsan not found: /svn/hangzhi 在svnadmin控制台上将用户分好组,不然即使有账户也登不上

  4. 套接字之recv系统调用

    recv系统调用对sys_recvfrom进行了简单的封装,只是其中不包含地址信息,其只需要从建立连接的另一端接收信息: /* * Receive a datagram from a socket. ...

  5. python3笔记二：进制转换与原码反码补码

    一:学习内容 进制:二进制.八进制.十进制.十六进制 进制转换 原码.反码.补码 二:进制 二进制 1.二进制:只有0和1,逢2进1 2.举例:0+0=0.0+1=1.1+1=10 3.过程剖析:二进 ...

  6. 全排列函数next_permutation(a,a+n)

    #include<iostream> #include<algorithm> using namespace std; int main(){ ]; int n; cin> ...

  7. what we regret most 国外的调查结果： 一生中最后悔的事情

    http://v.163.com/movie/2013/4/U/9/M93FDHRBE_M93FFFNU9.html 来自为知笔记(Wiz)

  8. C++11获取当前毫秒数

    获取当前毫秒数 主要是打印日志的时候用到 / CLOCKS_PER_SEC); 头文件为ctime

  9. viewpager标签栏之PagerTab

    import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; impor ...

  10. redis cluster 集群 安装 配置 详解

    redis cluster 集群 安装 配置 详解 张映 发表于 2015-05-01 分类目录: nosql 标签:cluster, redis, 安装, 配置, 集群 Redis 集群是一个提供在 ...