案例一：

<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. line-height与vertical-align：简单的属性不简单

    学习过CSS肯定对line-height与vertical-align两个属性有印象:line-height用来设置行高,vertical-align用来设置文本垂直方向的对齐方式,两种看似十分简单, ...

  2. 实现图像添加label

    void CmapwingisTest2View::OnToolsAddTiffLayer() { TCHAR szFilters[]= _T("TIFF Files (*.tif)|*.t ...

  3. 安装Dubbo 并且安装注册中心(Zookeeper-3.3.6)

    安装zookeeper 安装Tomcat 载dubbo-admin-2.5.4.war 进入Apache ZooKeeper官方网站进行下载,https://zookeeper.apache.org/ ...

  4. postgres 使用psql连接

    输入:sudo su - postgres 在bash下输入:psql,下文出现postgres字样 在postgres后:输入:\c 数据库名称,连接数据库 在数据库名#:输入查询语句或者其他sql ...

  5. Note: Time clocks and the ordering of events in a distributed system

    http://research.microsoft.com/en-us/um/people/lamport/pubs/time-clocks.pdf 分布式系统的时钟同步是一个非常困难的问题,this ...

  6. Linux修改环境变量的4种方法

    转载 查看PATH:echo $PATH以添加mongodb server为列修改方法一:export PATH=/usr/local/mongodb/bin:$PATH//配置完后可以通过echo ...

  7. 使用Jmeter性能测试注意点

    一.性能测试注意点 1. 用jmeter测试时使用BeanShell脚本获取随机参数值,会导致请求时间过长,TPS过低.应改为使用csv读取参数值,记录的TPS会更加准确. 注:进行性能测试时,应注意 ...

  8. Oracle中生成随机数的函数

    在Oracle中的DBMS_RANDOM程序包中封装了一些生成随机数和随机字符串的函数,其中常用的有以下两个: DBMS_RANDOM.VALUE函数 该函数用来产生一个随机数,有两种用法: 1. 产 ...

  9. Kubernetes Controller执行框架解析

    毫无疑问,声明式API以及Controller机制是Kubernetes设计理念的基础.Controller不断从API Server同步资源对象的期望状态并且在资源对象的期望状态和实际运行状态之间进 ...

  10. java锁机制的面试题

    java锁机制的面试题 1.ABA问题 2.CAS乐观锁 3.synchronize实现原理 4.synchronize与lock的区别 5.volatile实现原理 6.乐观锁的业务场景及实现方式 ...