简介

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

用法

<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. QA is more than Testing

    前话:在测试这个行业做了挺多年了,都快忘记自己大学的专业是国际经济与贸易,一个选择可能就决定了一生的方向. 但既然做了选择,就走下去. ----------------- 在这么多年的工作中,测试始终 ...

  2. 【Bootstrap】4.企业网站（待续）

    上一章有队个人站点站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.话句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos ...

  3. 内部类 &amp; 泛型

    内部类 主要作用 1. 内部类, 主要用于事件监听的方法实现.2. 用于多继承 注: 主要还是 1 用的比较多. 参考 : head first java (第12章) 泛型 head first j ...

  4. CentOS 下用的是lnmp 的包配置Nginx 下的CI伪静态(搞爽了)

    server { listen ; server_name cy.com; index index.html index.htm index.php default.html default.htm ...

  5. linux 通用IO

    open(),read(),write(),close()可以应用于管道,FIFO,socket,或者终端等所有文件类型执行IO操作. lseek()并不适用于所有类型的文件.不允许将lseek()应 ...

  6. 【转】KVM/Installation

    [转]KVM/Installation Installation Pre-installation checklist Check that your CPU supports hardware vi ...

  7. dotfiles for linux/unix users automatically! (python Vim IDE)

    Here is a brief introduction and package of dotfiles for linux/unix user. I think there are enough i ...

  8. jQuery 文档操作之prepend() 和prependTo()方法.

    //prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...

  9. 增加Myecllipse内存

    1.打开MyEclipse后,进入Windows/Preferences/Java/Installed JREs 点击后,在右边窗口选择JREs,双击后进入 2.在Default VM Argumen ...

  10. 利用ST MCU内部基准参考电压监测电源电压及其它

    在使用ST MCU开发过程中,有人问如果电源电压是变动的,询问有无办法用比较简洁的办法对电源电压进行监测,或者说电源电压波动情况下能否检测出其它待测的AD输入电压. 这里跟大家分享交流一个方法.就是在 ...