简介

一款简单好用的前端模板引擎

用法

<script type="text/javascript" src="js/doT.min.js"></script>

! 和 = 的用法与区别

<!--用户信息-->
<div class="ibBox yhxx" id="userInfo">
　　<script id="userTemplate" type="text/x-dot-template">
   　　<div class="ibTitle">用户信息</div>
      <dl>
         <dd>
            <label><em>姓名：</em><span>{{!it.name}}</span></label>
            <label><em>工号：</em><span>{{=it.number}}</span></label>
         　　<label><em>机构：</em><span>{{!it.organName}}</span></label>
      　　</dd>
   　　</dl>
　　</script>
</div>
<script>
    ,"organName":""},//要渲染的数据
    var userTemplate = doT.template($("#userTemplate").text());//生成模板
    $("#userInfo").html(userTemplate(data));//数据渲染
</script>

两者都是赋值，区别于 ! 无法渲染数值为0的数据，而 = 可以，不过 ! 可以渲染带编码的数据，比如

var data= {"url":"http://jq22.com/?keywords=Yoga","html":"<div style='background: #f00; height: 30px; line-height: 30px;'>html元素</div>"};

~ 的用法

{{~it.list:item:index}}
<tr data-id="{{!item.id}}">
    <td>{{!item.title}}</td>
    <td>{{!item.publishTime}} </td>
</tr>
{{~}}

用于循环数组

? 的用法

<span class="{{? it.type==1}}w1{{?? it.type==2}}w2{{??}}w3{{?}}">
　　{{?it.status==}}未发布{{??}}已发布{{?}}
</span>

条件判断,相当于if....else if......

# 的用法

<div class="ibBox yhxx" id="userInfo">
　　<script id="userTemplate" type="text/x-dot-template">
　　　　<!-- 定义模板tem1 -->
　　　　{{## def.tem1:
　　　　　　<label><em>姓名：</em><span>{{!it.name}}</span></label>
　　　　#}}
   　　<div class="ibTitle">用户信息</div>
      <dl>
         <dd>
　　　　　　　　<!-- 引用模板tem1 -->
            {{#def.tem1}}
            <label><em>工号：</em><span>{{=it.number}}</span></label>
         　　<label><em>机构：</em><span>{{!it.organName}}</span></label>
      　　</dd>
   　　</dl>
　　</script>
</div>

格式：定义模板{{##def.name:******#}} name为模板名称，*****为模板内容，引用模板{{#def.name}} name为模板名称

for 原生循环的使用

{{ ;i<it.length;i++){ }}
　　{{ ){ }}
    　 {{#def.tem1}}
   {{ }else{ }}
   　　{{#def.tem2}}
　　{{ } }}
{{ } }}

前端模板引擎doT.js的用法的更多相关文章

  1. 模板引擎doT.js

    作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div i ...

  2. 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环&#183;&#183;&#183;

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

  3. 关于模板引擎handlebars.js基本用法

    说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...

  4. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  5. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  6. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  7. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  8. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  9. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

  10. artTemplate-优秀的前端模板引擎

    artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...

随机推荐

  1. 17+个ASP.NET MVC扩展点【附源码】

    1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中!即:创建一个实现了IHttpmodule接口的类,并将配置WebConfig.  在自定义的Http ...

  2. MySQL_监控用户下单地址没有就近仓库配送情况_20161215

    如果用户所在的地址位于A市场,A市场所就近的仓库应该为a,通过监控发现用户下单后配送仓库的不是a而是b仓库发货,这就会引起物流成本的增加. 因此对客户下单挑选最近的仓库进行监控是很有必要的 #C041 ...

  3. sharepoint bcs (bussiness connectivity services)

    sharepoint bcs  在2010 版本中是提供2010 与外部数据连接的. BCS全名Business Connectivity Services,可以把它看成SharePoint 2007 ...

  4. replaceCharactersInRange

    NSString 替换字符串中某一位置的文字  replaceCharactersInRange NSString 替换字符串中某一位置的文字 - (void)viewDidLoad { NSMuta ...

  5. ARM中MMU地址转换理解

    首先,我们要分清ARM CPU上的三个地址:虚拟地址(VA,Virtual Address).变换后的虚拟地址(MVA,Modified Virtual Address).物理地址(PA,Physic ...

  6. Hyper Prefix Sets

    uva11488:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&am ...

  7. xgboost在windows上的安装

    xgboost是一个boosting+decision trees的工具包,看微博上各种大牛都说效果很好,于是下载一个,使用了一下,安装步骤如下. 第一步,编译生成xgboost.exe(用于CLI) ...

  8. 新手必看的jQuery优化笔记十则

    jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...

  9. onsubmit事件

    var oForm = document.getElementById("form1"); oForm.onsubmit = function(){   alert("你 ...

  10. sockaddr_u详解

    struct sockaddr { unsigned short sa_family;     /* address family, AF_xxx */ char sa_data[14];       ...