doT.js

最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种。

doT.js的特点是体积小,速度快,并且不依赖其他插件。

官网下载:http://olado.github.io

下面是用法:

模板引擎

<script id="visitlisttmpl" type="text/x-dot-template">
    {{if( it && it.length>0 ){ }}
    {{ for(var i=0; i< it.length; i++) { }}

    {{ } }}

    {{ }else{ }}

    {{ } }}
 </script>

调用模板引擎

<script type="text/javascript">
    var evalText = doT.template($("#visitlisttmpl").text());//visitlisttmpl是模板
    html = evalText(data);//data是已经得到的数据集合,json数据格式  $("#temp").html(html);
</script>

在使用模板引擎的过程中,会遇到一些问题,比如说是if...else...的用法,如下:

{? it[i].data === null }}//if

{{?? }}//else

{{? }}//特别是最后的这个,一定不能忘

当然还有一些其他的用法,以后在使用的过程中会慢慢补充上。

时间: 2024-12-27 17:56:18

doT.js的相关文章

模板引擎doT.js

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

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是为

doT.js源码解读

doT.js非常的简洁.全部代码也就200行不到.它的基本思路就是通过强大的正则表达式,把模块转变成可执行的函数,动态生成html字符串.核心new Function(c.varname, str); 对于Function的介绍,可以移步到:http://www.w3school.com.cn/js/pro_js_functions_function_object.asp 对于正则表达式的介绍,可以移步到:http://baike.baidu.com/link?url=xWagu_y8HrRlR

doT js 模板引擎【初探】

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

doT.js 学习

刚来公司第二天就让我做app,以前也没接触过,后来发现用apicloud开发app很简单,就是apicloud本身有点坑. 期间遇到了一个模板doT,觉得挺有意思的.想总结一下: 1)doT.js 是一个模板框架,在web前端使用.主要用途是在写好的模板上放入数据,生成含有数据的HTML代码.使用前要导入doT.min.js 2)常用的模板: {{= }} for interpolation //赋值操作 {{ }} for evaluation //循环操作 {{~ }} for array

doT.js——前端javascript模板引擎问题备忘录

我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想去寻找解决方法. 可是,我,是万难不能接受这种丑陋的解决方式的.有没有优雅的解决方法呢,于是在网上搜索到了doT.js. 主页很简洁,就一个页面,研究了一下,就顺利的上手了,相当的简单易用.主要分两步走. 1.写模板 写模板,就用官方文档里提供给你的三板斧就搞定了,当然总共不止三个: {{ }} f

doT js模板入门 3

for 循环前判断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"> {{? it.invoiceInfoDtos}} {{ for(var prop=0;prop <it.invoiceInfoDtos.length ; prop++){ }} <div class="{{ if(prop==0){}}invoice-infor {{ }else

doT js模板入门

doT.js github地址: doT.js 官方网站 实例1:简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../doT.js"></scr

doT js模板入门 2

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手 {{–><% }}–>%> 例如: <div id="evaluationtmpl"> {{ for(var prop in it) { }} <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> {{ } }} </div> 是不是很像: <div id="evaluatio