<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Dot模板总结</title>

 </head>

 <body>

 <div id="div1">

 </div>

 <!--安装dot模板-->

 <script src="dot.js"></script>

 <!--dot的javascript模板-->

 <script id="j-tmpl" type="text/template">

     {{ if(it.success){ }}

     <h2>results:</h2>

     <ul>

         {{ for (var i = 0, l = it.data.length; i < l; i++) { }}

         <li>

             <h5>{{=it.data[i].title}}</h5>

             <p>{{=it.data[i].message}}</p>

         </li>

         {{ } }}

         <ul>

             {{ }else{ }}

             <h2>暂无数据</h2>

             {{ } }}

 </script>

 <!--1.获取数据,2.填充数据到模板，3.将填充数据后的模板填充的html代码指定位置-->

 <script>

     //伪造数据

     var obj = {

         success: true,

         data:[

             {title:'item1',message:11},

             {title:'item2',message:22}

         ]

     }

     //初始化模板

     var tmpl = document.getElementById('j-tmpl').innerHTML;

     var doTtmpl = doT.template(tmpl);

     //模板填充数据

     var data = doTtmpl(obj );

     //模板填充到指定位置

     var dd = document.getElementById("div1");

     dd.innerHTML = data;

 </script>

 </body>

 </html>

相关博文：http://www.fantxi.com/blog/archives/dot-template/

http://www.cnblogs.com/kuikui/p/3505768.html

dot文档：http://olado.github.io/doT/index.html

Dot模板的使用小结2的更多相关文章

  1. 随时可以给doT模板传任何你想要的值

    我以前一直以为只有传给后台的数据才能用doT模板写入, 其实,随时可以把本地处理的数据,仅仅的一个变量,改头换面成一个it关键字下面的属性. 方法就是在tpl中给它赋值. 要注意的是,首先tpl中的属 ...

  2. doT模板引擎

    doT模板引擎是一个比较高效的引擎,一直都在使用,只有3kb大小,简洁的语法,无任何依赖,简单易用:下面的代码直接拷贝引用就可以使用: 插件代码 (function(){function p(b,a, ...

  3. doT模板双重循环模板渲染方法

    doT模板作为一个前端渲染模板,有着非常显著的有点.1.轻量.2.快捷.3.无依赖. 本文介绍一种几乎所有模板都会遇到的问题,双重循环渲染.我们知道在dot模板中循环渲染用的是{{~ it:value ...

  4. doT模板

    框架源码地址 https://github.com/olado/doT <div id="main"> <script id="banner-templ ...

  5. Finecms模板标签调用小结 方便快速入门

    最近接了一个单子客户要求用finecms进行建站,由于也是php代码,也可以直接调用相关函数,所以上手相对比较快,ytkah总结了一些常用的函数方便您快速入门Finecms.一个网站一般由主页.栏目页 ...

  6. Asp.net通过模板(.dot/Html)导出Word，同时导出图片

    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...

  7. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  8. doT.js-doT模板方便快捷的组织页面DOM

    重来没有想过,作为一个坐吃等死的前端也会有学习引擎模板的一天 都是被现实所逼呀.学习优秀代码时,一句一句翻译.忽然看到{{   }}这个包裹的代码.糟心了!看不懂,咋办?学呀!!!!!! 这是我开始学 ...

  9. The DOT Language

    CSDN新首页上线啦,邀请你来立即体验! 立即体验 博客 学院 下载 更多 登录注册 The DOT Language 翻译 2014年04月15日 11:27:07 标签: EBNF / 语言 / ...

随机推荐

  1. python运维开发(五)----模块、生成器

    内容目录 双层装饰器 字符串格式化 生成器和迭代器 递归 模块 双层装饰器 需求场景介绍: 现有用户登录系统,普通用户能查看自己相关信息的权限,管理员用户能查看所有用户的权限,可以做两个装饰器来实现需 ...

  2. [Python] 应用kNN算法预测豆瓣电影用户的性别

    应用kNN算法预测豆瓣电影用户的性别 摘要 本文认为不同性别的人偏好的电影类型会有所不同,因此进行了此实验.利用较为活跃的274位豆瓣用户最近观看的100部电影,对其类型进行统计,以得到的37种电影类 ...

  3. 什么是web标准

    Web Standards Standards是个复数,就知道他是有好几个标准或者规范组成的,分别是:结构规范 XML ,XHTML;表现规范 CSS;行为规范 DOM,ECMAScript; 上面是 ...

  4. MYSQL 没有varchar(max)这个类型。

    背景: MYSQL 中不可以用varchar(max) 这种类型列来建立表 -------------------------------------------------------------- ...

  5. linux arp攻击解决方法 测试很有效

    公司有台centos服务器中了arp攻击,严重影响业务,测试了很多方法都没解决,机房技术也没法处理. 通过下面方法,可以有效抵挡arp攻击.   1.环境 centos6.4   2.执行 arpin ...

  6. GIS 地图中术语解释

    分辨率和像素的关系 像素是指照片的点数(表示照片是由多少点构成的),分辨率是指照片像素点的密度(是用单位尺寸内的像素点,一般用每英寸多少点表示--dpi).照片实际大小是像素决定的.一个像素很大的照片 ...

  7. CocoaPods的安装及安装出现问题的处理

    ocoaPods安装分两步:第一步.修改本机的Ruby环境:第二步.安装. 第一步:步骤1.打开终端输入   gem sources -l   查看本机的Ruby环境:若显示“https://ruby ...

  8. 【转】 LESS CSS 框架简介

    简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...

  9. [译] 使用Using Data Quality Services (DQS) 清理用户数据

    SQL Server 2012 Data Quality Services (DQS)  允许你使用自己的知识库来清洗数据. 在本文中我会展示一个简单示例. 使用DQS清理步骤如下: A. 建立DQS ...

  10. [hadoop]Cannot create directory /mdrill/tablelist/fact_seller_all_d. Name node is in safe mode.

    在执行mdrill创建表的时候报如下异常(蓝色部分为关键): [mdrill@hadoop1101 bin]$ ./bluewhale mdrill create ./create.sql higo ...