案例一：

<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. Eclipse中文插件安装教程

    先运行英文版Eclipse 点击Help选择Install New Software 直接点击Add按钮 Name输入: Babel Location输入: http://download.eclip ...

  2. 数据库-MongoDb

    *本文总结下使用Mongodb遇到的问题: 1. 安装完MongoDb后先启动服务端,然后再启动客户端: 直接上图: 注意点:mongod.exe :是用来连接到mongo数据库服务器的,即服务器端. ...

  3. [Flask]常用过滤器-控制字符串

    truncate: 字符串截断 <p>{{ 'hello every one' | truncate(9)}}</p> length:获取列表长度 <p>{{ [, ...

  4. 113路径总和II

    题目: 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 来源: https://leetcode-cn.com/problems/path-sum-ii/ 法一: ...

  5. 90子集II

    题目:给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集).说明:解集不能包含重复的子集. 输入:[1,2,2]   输出:[[2],[1],[1,2,2],[2,2],[1 ...

  6. Linux下监控网卡流量的软件Nload

    Linux下监控网卡流量的软件Nload 安装nload: # wget http://www.roland-riegel.de/nload/nload-0.7.2.tar.gz # tar zxvf ...

  7. windows vs2015 编译openssl 1.1.0c

    1,到openssl官网下载源码. 2,安装activePerl,我放在网盘:https://pan.baidu.com/s/1ZHe24yRcPtIuSiEa-3oqxw 3.安装完毕后,使用 VS ...

  8. SI_WorkShop_V4安装手册

    V4安装手册 第一步 启动workshopV4 解压workshopV4.rar,在解压后的目录中双击eclipse.exe启动workshopV4,启动画面如下图所示:(注:解压后第1次启动速度会慢 ...

  9. Dojo入门：增强的Ajax功能

      随着Web技术的发展,RIA似乎已经成了主流,Ajax也随之成了不可或缺的部分.Ajax是异步的javascript和Xml,虽然现在很多交互的数据格式都不再严格的采用XML,但这种异步的操作却越 ...

  10. 基于Opencv的自适应中值滤波函数selfAdaptiveMedianBlur（）

    7.3.3 自适应滤波器 自适应中值滤波器 对于7.3.2节所讨论的中值滤波器,只要脉冲噪声的空间密度不大,性能还是可以的(根据经验需Pa和Pb小于0.2).本节将证明,自适应中值滤波器可以处理更大概 ...