最近用到的数据模板引擎有很多,今天讲的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. ngx_http_uwsgi_module模块.md

    ngx_http_uwsgi_module ngx_http_uwsgi_module模块允许将请求传递到uwsgi服务器. 示例配置: location / { include uwsgi_para ...

  2. canvas arcTo()用法详解

    CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...

  3. 当div有边框图片的时候,怎么实现内部的p标签的水平和垂直居中

    <!-- 这里a.png必须是四边的框都有,限制,这个时候做里边文字的居中,首先在这个里边在套一个div悬浮(absolute或者float:left),然后在这个div(必须设宽高和margi ...

  4. 常用jdbc的url

    Microsoft SQL Server Microsoft SQL Server JDBC Driver (一般用来连接 SQLServer 2000) 驱动程序包名:msbase.jar mssq ...

  5. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  6. 使用haproxy的ACL封禁IP

    http://www.360doc.com/content/11/1226/13/834950_175075893.shtml 该方法,用户访问得到的是403页面 或者尝试用http-request拒 ...

  7. 逻辑回归 Logistic Regression

    逻辑回归(Logistic Regression)是广义线性回归的一种.逻辑回归是用来做分类任务的常用算法.分类任务的目标是找一个函数,把观测值匹配到相关的类和标签上.比如一个人有没有病,又因为噪声的 ...

  8. 修改.net mvc中前端验证信息的显示方式

    最近一直在学习.net core的用法.想法是通过写一个新闻系统来熟悉一下这个最新的技术.其实,我以前一直对.net技术都是浅尝辄止,最主要原因是没有动力.平时写企业站因为时间原因,不是使用php的框 ...

  9. java第二周周学习总结

    java运算符和循环 java运算符 一.for 语句 for 语句的基本结构如下所示:for(初始化表达式;判断表达式;递增(递减)表达式){    执行语句;   //一段代码} 初始化表达式:初 ...

  10. hdu 4859 海岸线 Bestcoder Round 1

    http://acm.hdu.edu.cn/showproblem.php?pid=4859 题目大意: 在一个矩形周围都是海,这个矩形中有陆地,深海和浅海.浅海是可以填成陆地的. 求最多有多少条方格 ...