doT.js 学习

刚来公司第二天就让我做app,以前也没接触过,后来发现用apicloud开发app很简单,就是apicloud本身有点坑。

期间遇到了一个模板doT,觉得挺有意思的。想总结一下:

1)doT.js 是一个模板框架,在web前端使用。主要用途是在写好的模板上放入数据,生成含有数据的HTML代码。使用前要导入doT.min.js
2)常用的模板:

  {{= }} for interpolation //赋值操作

{{ }} for evaluation //循环操作

  {{~ }} for array iteration //数组操作

  {{? }} for conditionals //条件操作

  {{! }}赋值并且编码

  目前为止我只用到了{{= }} 和{{ }}   只要不是HTML代码都要用{{}}包起来
3)调用方式:var tmpText = doT.template(模板);
         tmpText(数据源);
4)特点:doT.js特点是快,小,无依赖其他插件

5)案例:

区域:<div id="interpolation"></div> 

模板:

<script id="interpolationtmpl" type="text/x-dot-template">
<div>Hi {{=it.name}}!</div>
<div>{{=it.age || ‘‘}}</div>
</script>

调用方式:

var dataInter = {"name":"Jake","age":31};
var interText = doT.template($("#interpolationtmpl").text());
$("#interpolation").html(interText(dataInter));

interText(dataInter) 相当于 {{=it.name}}中的it

时间: 2024-10-14 06:02:39

doT.js 学习的相关文章

模板引擎doT.js

作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div id="testid"></div> <script type="text/javascript"> var testjson={"name":"张三","age":31,"

doT js 模板引擎【初探】

js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. 常见模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate等 为什么选择doT: doT.j

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

NODE.JS学习的常见误区及四大名著

NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang/p/4374681.html 收到了很多兄弟的热情回复和激烈讨论,在此深表感谢,有的朋友觉得我写的比较粗犷,没有给出具体的性能分析和对比,在此我想说的是其实好多东西的性能分析,根本就不用我写到博客上,其一是如果我写了,很多人同样会觉得不客观,不中立,其二是网上很多中立的机构,随便搜索一下,对比太多

Ext JS学习第五天 Ext_window组件(一)

此文来记录学习笔记 •第一个组件:Ext.window.Window.对于组件,也就是Ext最吸引开发者的地方,那么我们要真正的使用Ext的组件,首先必须学会阅读API文档. –xtype:组件的别名 –Hierarchy 层次结构 –Inherited mixins 混入的类 –Requires 该组件需要使用的类 –configs:组件的配置信息 –properties:组件的属性 –methods:组件的方法 –events:组件的事件 •window组件常用属性和方法讲解: •confi

JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习 文件目录结构 /sea/sea.js      下载地址  http://seajs.org/docs/#downloads /sea/jquery-sea.js   下载地址 http://jquery.com/download/ /sea/sea_config.js /sea/home.jsdata.js /sea/data.js 1.html页面代码文件 <style> .ch{height:200px;width:200px;background:#ccc;

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

doT.js 模板引擎的使用

模版引擎之前在介绍mustache时已经提到了.doT.mustache各有优势吧,如果用于JS环境,doT的性能更胜一筹,并且套语句更方便些.现在公司的mobile页面已经被我替换成doT了. doT source: https://github.com/olado/doTDocs: http://olado.github.com/doT/ doT上手比较容易,但之前熟悉了mustache,改用doT时有点不习惯,但用两次就好了. 下载doT.js(里面有个doU.js不要用,doU.js是为