案例一：

<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]python中**是什么

    作为运算符时 ** 在python里面表示幂运算 传递实参和定义形参(所谓实参就是调用函数时传入的参数,形参则是定义函数是定义的参数)的时候,你还可以使用两个特殊的语法:``*`` ** . 调用函数 ...

  2. 跨IDC ycache原理和配置说明

    总体介绍:   多idc缓存方案的invalid方案(如下图),是通过两个操作保证多个idc之间的缓存的高可用性和最终一致性的. 更新数据库后,发送invalid消息:invalid消息广播到其他id ...

  3. Django admin 设置和定制

    models 在 models.py 中定义,每个 model 是一个 class: from django.db import models class PerformanceData(models ...

  4. cocoapods [!] Unable to find a pod with name, author, summary, or description matching `xx`

    pod search MJRefresh的时候报错 [!] Unable to find a pod with name, author, summary, or description matchi ...

  5. 四十七：数据库之alembic数据库迁移工具的基本使用

    在一般情况下,如果修改了模型,如增加或者删除了字段,SQLAlchemy是不会更新的,这就需要使用alembic来实现 使用alembic步骤:一:定义好模型二:使用alembic创建一个仓库:ale ...

  6. Visual Studio 2017 远程调试

    当你将.NET程序发布到不同机子时候,想要进行调试,但机子不足以安装VS或安装VS麻烦,可以考虑使用远程调试,这里以C#项目为例,asp.net方法略有不同 原理: 首先安装VS远程调试工具,有俩种安 ...

  7. Swift 发送邮件和附件

    public function send($filename, array $render = [],$subject = '审核通知') { // Create the Transport $tra ...

  8. 使用 Unity* 进行并行处理的一种方法

    本文展示如何使用 Unity* 对游戏进行并行处理,以及如何使用游戏引擎执行与游戏相关的物理.在这个领域内,现实感是成功的一个重要标志.为了模拟真实世界,许多动作需要同时发生,这需要并行处理.创建两个 ...

  9. cocos2dx[3.2](5) 屏幕适配

    1.两个分辨率 1.1.窗口分辨率 在AppDelegate.cpp中有个设置窗口分辨率的函数.该函数是设置了我们预想设备的屏幕大小,也就是应用程序窗口的大小. // glView->setFr ...

  10. django.db.migrations.exceptions.BadMigrationError: Migration tests in app bl

    这个错误基本上都是 替换文件后才会出现的问题 因为你替换后他的日志文件没有完全替换的话,那么日志对应不到就会出现这样的问题, 一个模糊的处理办法:重新进行数据迁移:首先删除migrations中除去_ ...