案例一：

<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. Mongo rs

    概念 rs中存储了每一次对mongo数据库的CUD操作,对rs的大小进行resize. 主要有两种方法: 在未开启过rs的情况下,修改配置文件 已使用rs一段时间后,发现rs太大,重新进行大小配置 启 ...

  2. Understand RNN with TensorFlow in 7 Steps

    待翻译 https://medium.com/@erikhallstrm/hello-world-rnn-83cd7105b767

  3. mysql 日期辅助表

    MySQL 生成日期表 #.创建一个num表,用来存储数字0 CREATE TABLE num (i int); #.在num表中生成0 ), (), (), (), (), (), (), (), ...

  4. 20175215 2018-2019-2 第八周java课程学习总结

    第十五章 泛型与几何框架 15.1 泛型 泛型(Generics)是在JDK1.5中推出的,其主要目的是可以建立具有类型安全的集合框架,如链表.散列映射等数据结构. 15.1.1 泛型类声明 可以使用 ...

  5. 第七周总结&第五次实验报告

    学习总结 这周我们加深了对抽象类与接口的学习,获得的知识点也比上周多了许多,抽象类与接口很相似,就比如别人还没有做完的是交给你来做,而他那些样式都做好了,你只需要完善即可 但也有不同点. 区别点 抽象 ...

  6. 使用C#语言，将DataTable 转换成域模型

    DataTable dt = SqlHelper.Query(strQuery); ) * size).Take(pagesize); List<Model> listData = new ...

  7. nginx location正则

    nginx location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # ...

  8. 【flask】环境配置-python-dotenv的使用

    [自动发现程序实例] 一般来说,在执行flask run命令运行程序前,我们需要提供程序实例所在模块的位置 . Flask会自动探测程序实例,自动探测存在下面这些规则: 从当前目录寻找app.py和w ...

  9. Nodejs 之非阻塞 I/O、异步、事件驱动

    1.非阻塞 I/O var fs = require('fs'); console.log('); fs.readFile('mime.json',function (err,data) {//rea ...

  10. APP测试流程梳理

    APP测试流程梳理 1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试 ...