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

    Holographic Emulation is a new feature that vastly reduces iteration time when developing holographi ...

  2. HDU 1564 Play a game(巴什博弈)

    New Year is Coming! ailyanlu is very happy today! and he is playing a chessboard game with 8600. The ...

  3. [LeetCode] Binary Watch 二进制表

    A binary watch has 4 LEDs on the top which represent the hours (0-11), and the 6 LEDs on the bottom ...

  4. [LeetCode] Binary Tree Paths 二叉树路径

    Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree: 1 ...

  5. 火狐下js的日期比较的方法

    function tab(date1,date2){ var oDate1 = new Date(date1); var oDate2 = new Date(date2); if(oDate1.get ...

  6. list,tuple,dict,set常用方法

    Python中list,tuple,dict,set常用方法 collections模块提供的其它有用扩展类型 from collections import Counter from collect ...

  7. [转]SQL 常用函数及示例

    原文地址:http://www.cnblogs.com/canyangfeixue/archive/2013/07/21/3203588.html --SQL 基础-->常用函数 --===== ...

  8. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

  9. python基础补漏-02-collection

    collection系列 [1]计数器 Counter import collections res = collections.Counter("34234sdfgs45tsaf1&quo ...

  10. hibernate处理null 时提示:Property path [...] does notreference a collection

    Hibernate判断某属性不为null 且不可为空时出现Property path [...] does notreference a collection 的问题 处理空的方法: isNotEmp ...