最近用到的数据模板引擎有很多,今天讲的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. 第一个C语言的小项目

    这里先写下主要的业务代码,一些库代码稍后补充上 /** * Feed新闻个性化推送 */ #include "push_service_news.h" /** * 保证单进程运行 ...

  2. mybatis常见易出错

    在学习mybatis的过程中,发现了很多错误,这里记录一下,以供后来使用 1,config.xml文件中配置项的顺序: org.apache.ibatis.exceptions.Persistence ...

  3. [LeetCode] Minimum Height Trees 最小高度树

    For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...

  4. Ubuntu[1]安装Vesta Control Panel

    参考:http://www.5013.org/archives/819 1)登录 ssh ubuntu@139.199.9.173 ubuntu@139.199.9.173's password: 重 ...

  5. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  6. 小谈Jquery框架

    现在Jquery框架对于开发人员基本上是无人不知,无人不晓了,用起来十分的方便,特别是选择器十分强大,提高了我们的开发速度.但是好多人也只是停留在了会用的基础上,我个人觉得会用一个框架不算什么,只能说 ...

  7. charing animation

    FHD : full high definition,1920 x 1080,全高清 vendor/mediatek/proprietary/bootable/bootloader/lk/dev/lo ...

  8. 前端性能优化---yahoo军规

    一.尽可能减少HTTP请求数 二.使用CDN(内容分发网络) 三.添加Expire/Cache-Control头 四.启用Gzip压缩 五.将CSS放在页面最上面 六.将Script放在页面最下面 七 ...

  9. 格式化 float 类型,保留小数点后1位

    """  练习 :   小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点,   并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...

  10. 佛祖保佑 永无bug

    /* _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / \\||| : | ...