// 模板引擎配置项
var tmplOptions = {
evaluate: /\{\{([\s\S]+?\}?)\}\}/g,
interpolate: /\{\{=([\s\S]+?)\}\}/g,
encode: /\{\{!([\s\S]+?)\}\}/g,
use: /\{\{#([\s\S]+?)\}\}/g,
useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
defineParams:/^\s*([\w$]+):([\s\S]+)/,
conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
varname: 'it',
strip: true,
append: true,
selfcontained: false
};
// 模板引擎与jquery集成
$.extend({
tmpl: function(template, options) {
options = (options) ? $.extend(tmplOptions, options) : tmplOptions;
return doT.template.apply(null,[template, options]);
}
})
//使用方法
var doTtmpl = $.tmpl($("#prolistTmpl").html())
//data 是json数据
var data = {“name”:”jerman”,”location”:”shenzhen”,”work”:”Front-end development engineer”,”number”:[1,2,3,4,5,6]};
var html = doTtmpl(data); //简单调用
var html = doT.template(template)(data)

<script id="prolistTmpl" type="text/x-dot-template">
{{~it :item:index}}
<li class="{{=item.name}}" >
</li>
{{~}}
</script>

更多用法  查看官网: http://olado.github.io/doT/index.html

doT.js 声明的更多相关文章

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

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

  2. doT.js

    最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io 下面是用法: 模板引 ...

  3. doT.js学习

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

  4. doT.js详细介绍

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

  5. js声明json数据,打印json数据,遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

  6. doT.js源码解读

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

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

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

  8. dot.js教程文档api

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

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

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

随机推荐

  1. CSS flex 布局 一些基本属性应用

    作用于伸缩盒元素上的属性 box-orient .box-pack.box-align.box-direction.box-lines box-orient box-orient:horizontal ...

  2. EF中加载实体的方式

    EF中的查询执行时机:1. foreach进行枚举2. ToArray.ToList.ToDictionary3. Linq的一些操作,如First.Any4. DbSet上的Load操作.DbEnt ...

  3. WCF websocket

    WebSocket, like as TCP, is a bi-directional, full-duplex communication channel over a single TCP con ...

  4. Asp.net mvc4 + HighCharts + 曲线图

    前端代码: @{ Layout = null;}<!DOCTYPE html><html><head> <title></title> &l ...

  5. C#通过生成ini文件,记住用户关闭程序之前的选择+忽略跨线程检查

    1.在类的里面添加 //写配置文件 [DllImport("kernel32")] private static extern long WritePrivateProfileSt ...

  6. js 按元素向数组中最佳删除元素

    追加::: var a = [];// 创建数组 a.push(1); // 添加到最后 a.unshift(); // 添加到第一个位置 删除:::如果你没有使用第三方框架,有类似的扩展功能可以根据 ...

  7. 插件的理解$.extend()与$.fn.extend()

    插件的理解.$.extend()与$.fn.extend()    插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...

  8. 最常用的CSS技巧收集笔记

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  9. Linux下安装memcached图文版

    所用到的工具: putty小软件  可以远程连接主机的小软件     然后在屏幕上输入用户名root  密码:******即可连接 由于安装这两个工具需要编译所以:第一步要进行安装编译: 习惯于将下载 ...

  10. block(四)揭开神秘面纱(下)

    看此篇时,请大家同时打开两个网址(或者下载它们到本地然后打开): http://llvm.org/svn/llvm-project/compiler-rt/trunk/lib/BlocksRuntim ...