doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手

{{–><%

}}–>%>

比如:

<div id="evaluationtmpl">

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

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

    {{ } }}

</div>

是不是非常像:

<div id="evaluationtmpl">

    <% for(var prop in it) { %>

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

    <% } %>

</div>

以下是一个二重循环的实例:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>客户列表</title>

<link href="css/dealer.css" rel="stylesheet" type="text/css">

<link href="css/tcal.css" rel="stylesheet" type="text/css">

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

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

    <table border="1" >

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

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

                <tr  >

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

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

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

                </tr>

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

                    <tr>

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

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

                    </tr>

                {{ } }}

            {{?? }}

                <tr>

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

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

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

                </tr>

            {{?}}

        {{ } }}

    </tableb>

</script>

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

</head>

<body>

                <div id="table-list">

               </div>

</body>

<script type="text/javascript">

        var cusDate=[

        {"cusName":"天X信息技术有限公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-12"],"appPeop":["张三","李连清"]},

        {"cusName":"天X信息公司","appName":["好管家","朋友圈"],"appTime":["2015-07-12","2015-07-23"],"appPeop":["张三","李连清"]},

        {"cusName":"天X信息技公司","appName":"好管家","appTime":"2015-07-12","appPeop":"张青"},

        {"cusName":"天X公司","appName":"好管家,a+","appTime":"2015-07-12","appPeop":"张青"},

        ];

        //tmpljson={"testmode":"<td class='tab-com'>{{=trValue.cusName}}</td><td class='tab-other'>{{=trValue.appName}}</td><td class='tab-other'>{{=trValue.appTime}}</td><td class='tab-name'>aaa{{=trValue.appPeop}}</td>"}

//      console.log(document.getElementById("cuslist").innerHTML);

        console.log('----------------------');

        var cusHtml=doT.template(document.getElementById("cuslist").innerHTML);

        document.getElementById('table-list').innerHTML=cusHtml(cusDate);

        /*document.getElementById('table-list').innerHTML= doT.template(cusHtml,undefined)(cusDate);*/

</script>

</html>

执行结果:



注意:

1,第二次循环的index是从1開始的,而不是从0開始;

2,doT JS的if推断有两种写法:

写法一:

<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>

写法二:

<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>

參考:

doT js模板入门

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

  1. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  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. 洛谷——P1152 欢乐的跳

    P1152 欢乐的跳 题目描述 一个n个元素的整数数组,如果数组两个连续元素之间差的绝对值包括了[1,n-1]之间的所有整数,则称之符合“欢乐的跳”,如数组1 4 2 3符合“欢乐的跳”,因为差的绝对 ...

  2. [BZOJ3894]文理分科(最小割)

    (1) 对每个位置建一个点F1,S向这个点连art[i][j]的边,这个点向T连science[i][j]的边. (2) 对每个位置再建一个点F2,S向这个点连same_art[i][j]的边,这个点 ...

  3. [CF983E]NN country

    题意:给一棵树,有许多条巴士线路$(a_i,b_i)$(巴士在路径上每个点都会停车),多次询问从一点到另一点最少要坐多少次巴士 首先dfs一遍预处理出一个点向上坐$2^k$次巴士能到的最浅点,于是我们 ...

  4. 【转载】【bitset】C++ STL bitset 使用总结

    C++ bitset类的使用与简介 有些程序要处理二进制位的有序集,每个位可能包含的是0(关)或1(开)的值.位是用来保存一组项或条件的yes/no信息(有时也称标志)的简洁方法.标准库提供了bits ...

  5. 1.1(学习笔记）JSP（Java Server Pages）基础（脚本元素、指令元素）

    一.JSP简介 JSP全称为Java Server Pages,是一种动态网页开发技术,可以在HTML界面中嵌入java代码, 实现动态的提供数据.访问JSP时服务器会将JSP翻译成Servlet,访 ...

  6. python之装饰器、生成器、内置函数、JSON

    一.装饰器: 装饰器,器在这里的意思是函数,也就是装饰函数.作用是给其他函数添加新功能,它可以不改变原有的函数,原来的函数和原来一模一样,什么都不需要改变,只需要在函数外部加上调用哪个装饰器就可以了, ...

  7. iOS开发技巧——Autolayout动画

          使用Autolayout时需要在动画的代码前面后面添加 layoutIfNeeded方法 Animation AutoLayout也可以配合传统的animation方法,整体代码结构如下. ...

  8. 关于DNS,你应该知道这些

    在互联网时代中,如果要问哪个应用层协议最重要的话,我想答案无疑是DNS.虽然我们每天都享受着DNS服务带来的便利, 却对它往往知之甚少.因此本文就来介绍一下DNS协议的工作流程,真正认识一下这个支撑着 ...

  9. git rebase、git merge、git cherry-pick 使用详解

    1.git cherry-pick 是合入其他分支的某一次或者几次提交(cherry-pick是挑选的意思):把其他分支的某些功能合入当前分支 2.git merge 把其他分支合入当前分支,一般用作 ...

  10. Linux C 面试题总结

    1.进程和线程的区别,及优劣性比较 进程和线程的主要差别在于它们是不同的操作系统资源管理方式.进程有独立的地址空间,一个进程崩溃后,在保护模式下不会对其它进程产生影响,而线程只是一个进程中的不同执行路 ...