dot.js是一个模板框架，在web前端使用。

dot.js作为模板引擎，

主要的用途就是，在写好的模板上，放进数据，生成含有数据的html代码。

这是很简单的web前端模板框架，

简单说几个东西，你就会用了！

1、在模板中，it这个变量，就是传递进去的数据对象，应该就是英语的items；

2、doT.template( template )( obj )  代码解释：把模板template，作为参数传入doT.template()  方法，dot就把模板处理一下，然后你再把数据对象传入，返回值，就是html与数据 一起生成的html代码了，再拼接到页面即可；

3、在模板中，{{}}  包裹的内容，就是javascript代码，dot会负责处理，因为这写法怪异，新手一般出现模板写错的情况，仔细排查即可 。

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title></head>

  <body>

    <ul id='showInfo'>

      <script type="text/template" charset="utf-8" id='template_1'>

　　{{if (it && it.length > ) {}}

          {{for (var i = ; i < it.length; i++) {}}

            < li > {{ = it[i].name}} < /li>

{{ } }}

{{
 }else{
}}

<li>没有数据。</li >

 {{ } }}</script>

    </ul>

    <br>

    <hr>

    <br>

    <ul id='showInfo2'></ul>

  </body>

  <script type="text/javascript" charset="utf-8" src='doT.min.js'></script>

  <script type="text/javascript" charset="utf-8">var template = document.getElementById('template_1').innerHTML;

    var obj = [{

      name: 'd1'

    },

    {

      name: 'd2'

    },

    {

      name: 'd3'

    }];

    //传递一个有数据的数组进去

    document.getElementById('showInfo').innerHTML = doT.template(template)(obj);

    //传入的数据为空

    document.getElementById('showInfo2').innerHTML = doT.template(template)([]);</script>

</html>

doT.js 模板引擎的使用的更多相关文章

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

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

  2. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  3. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  4. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  5. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. baiduTemplate.js 百度JS模板引擎

    baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 先展示两个例子,然后说说对baidutemplate.js的理解,从而将这一工具加到个人百宝箱里. <script id ...

  9. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

随机推荐

  1. C# Process.Start()方法详解(转)

    C# Process.Start()方法详解 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某 ...

  2. java的clone

    做项目时有时可能会遇到需要克隆对象的时候,因为有时候对象是直接从别的类get到的,那样引用的是一个对象,修改的话会将原先的对象也修改了. java的浅克隆,十分简单.但是只会克隆基本的数据类型,当涉及 ...

  3. 不同css样式适应不同屏幕大小实现自适应宽度

    @media screen and (判断属性){ CSS样式选择器 } 例如: <div class="silder_photo"></div> < ...

  4. 理解中WebAPI的属性和相关操作 FormBody和 FormUri等（WebAPI 二）

    1.FromUri使用 将数据通过url方式传递.我们需要在webapi方法标明,这个参数只接受url中参数的值, $("#Save").click(function () { $ ...

  5. html5学习笔记2

    css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引 ...

  6. java学习一目了然——异常必知

    java学习一目了然--异常必知 我们只要学java,异常肯定非常熟悉,该抛的时候抛一下就行.但是这其中还有点小细节需要注意.就用这个小短篇来说一下异常处理中的小细节吧. 异常处理 RuntimeEx ...

  7. SQL Server数据库空间管理 (2)

     本篇内容主要解决剩余的两个问题:2).日志文件不停增长  4).自动增长和自动收缩 日志文件不停增长的解决 首先,当日志文件超过预期的时候,我们然要看看日志文件中存放了什么内容:DBCC LOG ; ...

  8. linux之SQL语句简明教程---表格连接

    现在我们介绍连接 (Join) 的概念.要了解连接,我们需要用到许多我们之前已介绍过的指令.我们先假设我们有以下的两个表格, Store_Information 表格 Store_Name Sales ...

  9. poj 1050 To the Max_dp求最大子矩阵和

    题意:求最大子矩阵和 利用dp[i]每次向下更新,构成竖起的单条矩阵,再按不小于零就加起来来更新,构成更大的矩阵 #include <iostream> #include<cstdi ...

  10. VRay 2.0 SP1 2.10.01 for 3ds max 9/2008/2009/2010/2011/2012 32/64位 顶渲简体中文版+英文版[中国室内设计论坛-室内人]

    VRay 2.0 SP1 2.10.01 for 3ds max 9/2008/2009/2010/2011/2012 32/64位 顶渲简体中文版+英文版[中国室内设计论坛-室内人] 对最新版本的V ...