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. POJ2513Colored Sticks（欧拉通路）（字典树)(并查集）

                                                             Colored Sticks Time Limit: 5000MS   Memory ...

  2. (转)python之并行任务的技巧

    Python的并发处理能力臭名昭著.先撇开线程以及GIL方面的问题不说,我觉得多线程问题的根源不在技术上而在于理念.大部分关于Pyhon线程和多进程的资料虽然都很不错,但却过于细节.这些资料讲的都是虎 ...

  3. 【点分治】【哈希表】bzoj2599 [IOI2011]Race

    给nlog2n随便过的跪了,不得已弄了个哈希表伪装成nlogn(当然随便卡,好孩子不要学)…… 不过为啥哈希表的大小开小点就RE啊……?必须得超过数据范围一大截才行……谜 #include<cs ...

  4. react-native热更新从零到成功中的各种坑

    https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md Android NDK暂时没有安装 在你的项 ...

  5. Scala实战高手****第17课：Scala并发编程实战及Spark源码阅读

    package com.wanji.scala.test import javax.swing.text.AbstractDocument.Content import scala.actors.Ac ...

  6. IOS,苹果内购和添加广告

    内购——应用内购买 通过苹果应用程序商店有三种主要赚钱的方式: 直接收费(与国内大部分用户的消费习惯相悖) 广告(降低用户体验 应用程序名称带Lite可以添加广告) O2O -> Online推 ...

  7. struts-2-spring-2-jpa-ajax

    http://struts.apache.org/docs/struts-2-spring-2-jpa-ajax.html

  8. Linux之ps查找进程用kill终止命令

    http://www.cnblogs.com/peida/archive/2012/12/20/2825837.html http://blog.csdn.net/andy572633/article ...

  9. 一起來玩鳥　Starling Framework（1）一定要的Hello World！

    雖然已經一堆Hello World的介紹文章跟影片了,但中文資料畢竟是比較少,所以不能免俗的來一篇中文版Hello World.首先開啟一個AS3.0專案,fps不用客氣,設為60,Starling很 ...

  10. 【招聘App】—— React/Nodejs/MongoDB全栈项目：个人中心&退出登录

    前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...