doT.js 声明
// 模板引擎配置项
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 声明的更多相关文章
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- doT.js
最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io 下面是用法: 模板引 ...
- doT.js学习
doT.js特点是快,小,无依赖其他插件.但是一般和jquery一起使用 官网:http://olado.github.io 使用方法:{{= }} for interpolation{{ }} fo ...
- doT.js详细介绍
doT.js详细介绍 doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...
- js声明json数据,打印json数据,遍历json数据
1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...
- doT.js源码解读
doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); ...
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
随机推荐
- CSS flex 布局 一些基本属性应用
作用于伸缩盒元素上的属性 box-orient .box-pack.box-align.box-direction.box-lines box-orient box-orient:horizontal ...
- EF中加载实体的方式
EF中的查询执行时机:1. foreach进行枚举2. ToArray.ToList.ToDictionary3. Linq的一些操作,如First.Any4. DbSet上的Load操作.DbEnt ...
- WCF websocket
WebSocket, like as TCP, is a bi-directional, full-duplex communication channel over a single TCP con ...
- Asp.net mvc4 + HighCharts + 曲线图
前端代码: @{ Layout = null;}<!DOCTYPE html><html><head> <title></title> &l ...
- C#通过生成ini文件,记住用户关闭程序之前的选择+忽略跨线程检查
1.在类的里面添加 //写配置文件 [DllImport("kernel32")] private static extern long WritePrivateProfileSt ...
- js 按元素向数组中最佳删除元素
追加::: var a = [];// 创建数组 a.push(1); // 添加到最后 a.unshift(); // 添加到第一个位置 删除:::如果你没有使用第三方框架,有类似的扩展功能可以根据 ...
- 插件的理解$.extend()与$.fn.extend()
插件的理解.$.extend()与$.fn.extend() 插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身:2.对象级别的插件开发,即$.fn.exte ...
- 最常用的CSS技巧收集笔记
1.重置浏览器的字体大小 重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...
- Linux下安装memcached图文版
所用到的工具: putty小软件 可以远程连接主机的小软件 然后在屏幕上输入用户名root 密码:******即可连接 由于安装这两个工具需要编译所以:第一步要进行安装编译: 习惯于将下载 ...
- block(四)揭开神秘面纱(下)
看此篇时,请大家同时打开两个网址(或者下载它们到本地然后打开): http://llvm.org/svn/llvm-project/compiler-rt/trunk/lib/BlocksRuntim ...