doT.js github地址:

doT.js 官方站点

实例1:简单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

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

    <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>

</head>

<body>

<div id="interpolationtmpl">

    <div>Hi {{=it.name}}!</div>

    <div>{{=it.age || ''}}</div>

</div>

<hr/>

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

<script type="text/javascript">

    var dataInter = {"name": "Jake", "age": 31};

    var interText = doT.template($("#interpolationtmpl").html());

    $("#interpolation").html(interText(dataInter));

</script>

</body>

</html>

执行结果:

实例二:条件推断

<body>

<div id="conditionstmpl">

    {{?

!it.name }}

    <div> 你还没有名字</div>

    {{?? }}

    <div>Oh, I love your name, {{=it.name}}!</div>

    {{?

}}

</div>

<hr/>

<div id="condition"></div>

<script type="text/javascript">

    var dataEncode = {"name": "黄威", "age": 31};

    var interText = doT.template($("#conditionstmpl").html());

    $("#condition").html(interText(dataEncode));

</script>

</body>

执行结果:

if条件推断 还有另外一种写法:

<body>

<div id="conditionstmpl">

    {{ if(!it.name){ }}

    <div> 你还没有名字</div>

    {{ } else { }}

    <div>Oh, I love your name, {{=it.name}}!</div>

    {{ }  }}

</div>

<hr/>

<div id="condition"></div>

<script type="text/javascript">

    var dataEncode = {"name": "", "age": 31};

    var interText = doT.template($("#conditionstmpl").html());

    $("#condition").html(interText(dataEncode));

</script>

</body>

实例三:循环+条件推断

<body>

<div id="evaluationtmpl">

    {{ for(var prop in it) { }}

        {{? typeof it[prop]=='object' }}

            <div style="font-weight: bold;" >KEY:{{= prop }}---VALUE:</div>

            {{ for(var prop2 in it[prop]) { }}

                <div style="margin-left: 20px;" >key:{{= prop2 }}---value:{{= it[prop][prop2] }}</div>

            {{ } }}

        {{?

? }}

            <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div>

        {{?

}}

    {{ } }}

</div>

<hr/>

<div id="evaluation"></div>

<script type="text/javascript">

    var dataEval = {

        "name": "Jake",

        "age": 31,

        "interests": ["basketball", "hockey", "photography"],

        "contact": {"email": "jake@xyz.com", "phone": "999999999"}

    };

    var evalText = doT.template($("#evaluationtmpl").html());

    $("#evaluation").html(evalText(dataEval));

</script>

</body>

执行结果:

普通循环(不是foreach)

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

{{ for(var prop in it){  }}

<table>

    {{? typeof it[prop]['appName']=='object' }}

        <tr  > <td rowspan="{{=it[prop]['appName'].length}}" >{{=it[prop]['cusName']}}</td>

        <td  >{{=it[prop]['appName'][0]}}</td>

        </tr>

        {{ for(var prop2=1;prop2 <it[prop]['appName'].length; prop2++ ){ }}

            <tr><td  >{{=it[prop]['appName'][prop2]}}</td></tr>

        {{ } }}

    {{?

? }}

        <tr><td >{{=it[prop]['cusName']}}</td><td >{{=it[prop]['appName']}}</td></tr>

    {{?

}}

</table>

{{ } }}

</script>

源代码下载地址:

doT 源代码及实例

说明:

1,{{? typeof it[prop]==’object’ }} 表示条件推断,结束标签是{{?}}

2, {{?? }}是条件推断的else

3,{{ 和{{? 中均能够使用原生的js语法,如for,typeof 等

4,模板并非一定要放在script标签中,也能够放在隐藏的div标签中

參考:doT js模板入门 2

作者: 黄威

博客地址:

CSDN博客主页

itEye博客主页

doT js模板入门的更多相关文章

  1. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  2. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  3. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  4. doT.js模板和pagination分页应用

    doT.js模板和pagination分页应用 博客中模拟了数据加载初始化的过程.doT.js渲染每一项内容的数据项.示例如下: <script id="Messtmpl" ...

  5. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  6. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  7. doT.js模板用法

    前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...

  8. dot.js模板实现分离式

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···

    doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...

随机推荐

  1. c语言‘\0’ ，‘0’， “0” ，0之间的区别

    首先比较一下‘\0’和‘0’的区别.有一个共同点就是它们都是字符,在c语言中,字符是按其所对应的ASCII码来存储的,一个字符占一个字节.请翻开你的ASCII字符集表吧,一般在你的C语言教材的附录上, ...

  2. 多线程之线程通信条件Condition

    Condition是Locks锁下的还有一种线程通信之间唤醒.堵塞的实现.它以下的await,和signal可以实现Object下的wait,notify和notifyAll的所有功能,除此之外改监视 ...

  3. 由于物化视图定义为on commit导致update更新基表慢的解决方案

    由于物化视图定义为on commit导致update更新基表慢的解决方案 以下是模拟和解决测试过程: (模拟update慢的过程) 1.首先基于基表创建物化视图日志: create materiali ...

  4. Python 第三篇(下)：collections系列、集合(set)、单双队列、深浅copy、内置函数

     一.collections系列: collections其实是python的标准库,也就是python的一个内置模块,因此使用之前导入一下collections模块即可,collections在py ...

  5. 基于visual Studio2013解决C语言竞赛题之0802图书信息查询

     题目 解决代码及点评 /* 功能:有一批图书,每本书有:书名(name),作者(author) , 编号(num),出版日期(date)四个数据, 希望输入后按书名的字母顺序将各书的记录排列好, ...

  6. Delphi的RTTI还分为对类和对象的判断，以及对普通属性的判断——相比之下，C++的RTTI实在太弱！

    堂堂C++沦落到这个地步,也实在是够可怜的.

  7. hdu1937 Finding Seats

    hdu1937 Finding Seats 题意是 求最小的矩形覆盖面积内包含 k 个 空位置 枚举上下边界然后 双端队列 求 最小面积 #include <iostream> #incl ...

  8. 刘德华夏日Fiesta演唱会上那个表演探戈舞的演员是谁啊？_百度知道

    刘德华夏日Fiesta演唱会上那个表演探戈舞的演员是谁啊?_百度知道     刘德华夏日Fiesta演唱会上那个表演探戈舞的演员是谁啊?    2008-05-28 00:04 topofhill | ...

  9. Java中int类型和tyte[]之间转换及byte[]合并

    JAVA基于位移的 int类型和tyte[]之间转换 [java] view plaincopy /** * 基于位移的int转化成byte[] * @param int number * @retu ...

  10. 在Ubuntu 12.04下编译qtiplot

    不在windows下,再加上不想用盗版,所以需要一个origin的替代品——qtiplot.虽然我非常抵抗用这种不停点来点去的软件,用R的ggplot2画图多好啊,高效.优雅.漂亮,但是终抵不过老板一 ...