1doT.js github地址:
http://olado.github.io/doT/
实例1:简单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../doT.js"></script> <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script> </head> <body> <div id="interpolationtmpl"> <div>Hi {{=it.name}}!</div> <div>{{=it.age || ''}}</div> </div> <hr/> <div id="interpolation"></div> <script type="text/javascript"> var dataInter = {"name": "Jake", "age": 31}; var interText = doT.template($("#interpolationtmpl").html()); $("#interpolation").html(interText(dataInter)); </script> </body> </html>
运行结果:
实例二:条件判断
<body> <div id="conditionstmpl"> {{? !it.name }} <div> 你还没有名字</div> {{?? }} <div>Oh, I love your name, {{=it.name}}!</div> {{?}} </div> <hr/> <div id="condition"></div> <script type="text/javascript"> var dataEncode = {"name": "黄威", "age": 31}; var interText = doT.template($("#conditionstmpl").html()); $("#condition").html(interText(dataEncode)); </script> </body>
运行结果:
实例三:循环+条件判断
<body> <div id="evaluationtmpl"> {{ for(var prop in it) { }} {{? typeof it[prop]=='object' }} <div style="font-weight: bold;" >KEY:{{= prop }}---VALUE:</div> {{ for(var prop2 in it[prop]) { }} <div style="margin-left: 20px;" >key:{{= prop2 }}---value:{{= it[prop][prop2] }}</div> {{ } }} {{?? }} <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> {{?}} {{ } }} </div> <hr/> <div id="evaluation"></div> <script type="text/javascript"> var dataEval = { "name": "Jake", "age": 31, "interests": ["basketball", "hockey", "photography"], "contact": {"email": "jake@xyz.com", "phone": "999999999"} }; var evalText = doT.template($("#evaluationtmpl").html()); $("#evaluation").html(evalText(dataEval)); </script> </body>
运行结果:
源码下载地址:
http://pan.baidu.com/s/1c0HFyb2
说明:1,{{? typeof it[prop]=='object' }} 表示条件判断,结束标签是{{?}}2, {{?? }}是条件判断的else3,{{ 和{{? 中均可以使用原生的js语法,如for,typeof 等4,模板并不是一定要放在script标签中,也可以放在隐藏的div标签中
相关推荐
doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 标签:doTjs
dotjs 是一个谷歌扩展,它可根据文件名 ~/.js 来执行 JavaScript 文件。例如,如果你想访问 http://www.google.com/ ,dotjs 将会执行 ~/.js/google.com.js。 而这将会使你很方便地使用 JavaScript 去改进你所喜爱的...
dotjs-loader 用于webpack的模块加载器 用法 安装 使用npm安装。 doT是一个对等依赖项,应单独安装: npm install --save-dev dot dotjs-loader 配置 在webpack.config.js配置加载器: module: { loaders : [ {...
#gulp-dotjs-packer 用 gulp 编译 (gulpjs.com) 信息 包裹 gulp-dotjs-packer 描述 Gulp 的 doTjs 编译器 吞咽版 3.x 用法 var gulp = require ( "gulp" ) ; var dotPacker = require ( "gulp-dotjs-packer" ) ; ...
gulp-dotjsify 用于预编译 doT.js 模板的 Gulp 插件用法安装gulp-dotjsify npm install gulp-dotjsify --save-dev选项###options.type 类型: String 此选项... src ( './path/to/dotjs/templates/*.dot' ) . pipe (
dotJS 2014 演讲,11 月 17 日,巴黎 在线查看幻灯片 在本地查看幻灯片 首先,确保您安装了以下内容: : $ npm install -g bower : $ npm install -g gulp 然后,安装依赖项并运行预览服务器: $ npm install &...
这些是defunkt的dotjs Chrome插件的文件。 这些文件做什么? 黑塞德 删除(Flash)广告 spiegel.de 删除(Flash)广告 子域 einestages.spiegel.de 塔兹 移除广告 时代周刊 移除广告
NULL 博文链接:https://0qingfeideyi0.iteye.com/blog/2274741
我的 .js 文件 我的 .js 文件的集合。 参见 。 核心数据.is.js 将登录页面图像更改为随机的 flickr 图像。 您可以找到示例屏幕截图。 github.com.js 这里正在发生两件事。 Hólmar 是一只忙碌的 github 蜜蜂。 这...
要求 请安装这个: 而且这只适用于谷歌浏览器 安装 只需将这个 repo 克隆到你的 ~/.js 目录中
不熟悉DOT的遍历或者说看不习惯dot官方遍历的,可以看下类似for或foreach的方法,相同效果
doT.js的特点是体积小,速度快,并且不依赖其他插件。 官网下载:http://olado.github.io
前端开源库-dot-object点对象,点对象使使用点表示法转换和读取(JSON)对象成为可能。
Node.js for dot net. C# language
打点 用于Browserify 转换插件。 安装 npm install dotify 用法 在 main.js 中: ... 您还可以将选项传递给 doT.js 编译器,例如保留空格: $ browserify -t [ dotify --no-strip ] main.js 执照 麻省理工学院
前端渲染有很多框架,而且形式和内容在不断发生变化。这些演变的背后是设计模式的变化,而归根到底是功能划分逻辑的演变:MVC—>MVP—>MVVM(忽略最早混...解决这个问题的模板引擎有很多,doT.js(出自女程序员LauraDok
点快递 带有缓存和布局支持的 Express 4.x 的 dot 存根。 安装 安装原始存储库 $ npm install dot-express --save ##设置 ...app.set('view engine', 'dotjs'); app.engine('.dotjs', doT.__express);
gulp-weibo-dot2js A plugin for , compiles to .js files. Gulp 扩展,根据 的 迁移而来。为了简单起见,暂时去掉了循环引用判断、include 路径合法性判断等。 Usage First, install gulp-weibo-dot2js as a ...
#g5-knockout-dot.js 带有 KnockoutJS 和 dot 模板的简单模块基础###设置安装包并将其用作组件的脚手架 git clone https://github.com/MajorLeagueBaseball/g5-knockout-dot.git npm install###服务器服务器...
我自己弄的js日历控件,方便调用,适用于java和dot net