最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种。

doT.js的特点是体积小,速度快,并且不依赖其他插件。

官网下载:http://olado.github.io

下面是用法:

模板引擎

<script id="visitlisttmpl" type="text/x-dot-template">
{{if( it && it.length>0 ){ }}
{{ for(var i=0; i< it.length; i++) { }} {{ } }} {{ }else{ }} {{ } }}
</script>

调用模板引擎

<script type="text/javascript">
var evalText = doT.template($("#visitlisttmpl").text());//visitlisttmpl是模板
html = evalText(data);//data是已经得到的数据集合,json数据格式
  $("#temp").html(html);
</script>

在使用模板引擎的过程中,会遇到一些问题,比如说是if...else...的用法,如下:

{? it[i].data === null }}//if

{{?? }}//else

{{? }}//特别是最后的这个,一定不能忘

当然还有一些其他的用法,以后在使用的过程中会慢慢补充上。

doT.js的更多相关文章

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

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

  2. doT.js学习

    doT.js特点是快,小,无依赖其他插件.但是一般和jquery一起使用 官网:http://olado.github.io 使用方法:{{= }} for interpolation{{ }} fo ...

  3. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  4. doT.js源码解读

    doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); ...

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

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

  6. dot.js教程文档api

    dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...

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

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

  8. doT js模板入门

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

  9. doT.js实例详解

    doT.js详细介绍 doT.js特点是快,小,无依赖其他插件.官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolation{ ...

随机推荐

  1. BZOJ 1030: [JSOI2007]文本生成器 [AC自动机 DP]

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3953  Solved: 1614[Submit][Stat ...

  2. AC日记——蓬莱山辉夜 codevs 2830

    2830 蓬莱山辉夜  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 在幻想乡中,蓬莱山辉夜是月球 ...

  3. JS中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: Typeof typeof 是一个一元运算,放在一个运算数之前 ...

  4. VehicleCamera解读

    坐标系: z-axis ^ | | y-axis | / | / |/ +----------------> x-axis 围绕Z轴旋转叫做偏航角,Yaw:围绕X轴旋转叫做 俯仰角,Pitch: ...

  5. C#中的WebBrowser控件的使用

    0.常用方法   Navigate(string urlString):浏览urlString表示的网址 Navigate(System.Uri url):浏览url表示的网址 Navigate(st ...

  6. Linux部署jar包

    当我们把java程序打成jar包后,放到linux上通过putty或其它终端执行的时候,如果按照:java -jar xxxx.jar执行,当我们退出putty或终端的时候,xxxx.jar这个程序也 ...

  7. 自建Ceph存储与 AWS、阿里云、腾讯云的成本对比

    本文单从存储成本角度对比了自建Ceph存储和业界公有云存储的硬件成本,不包括IDC带宽成本. 统计Ceph集群的用到的主要设备为: OSD.MON.RGW服务器 .TOR交换机. 机架. 下表解释: ...

  8. js压缩xml字符串,将xml字符串转换为xml对象,将xml对象转换为json对象

    /** * 压缩xml字符串 */ function compressXmlStr(str){ var prefix, suffix; var i = str.indexOf("\r&quo ...

  9. 用iMindMap如何提高我们绩效

    iMindMap模板中的向导功能可以帮助用户快速的建立起对应类型的思维导图,帮助初学者用户更快的掌握iMindMap.本文就介绍了iMindMap模板向导中的绩效辅导思维导图. 我们打开iMindMa ...

  10. 关于List的ConcurrentModificationException

    对ArrayList的操作我们可以通过索引象来访问,也可以通过Iterator来访问,只要不对ArrayList结构上进行修改都不会造成ConcurrentModificationException, ...