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

我手里维护的一个项目，遇到一个问题：原项目的开发人员在Javascript中，大量的拼接HTML，导致代码极丑，极难维护。他们怎么能够忍受的了这么丑陋、拙劣的代码呢，也许是他们的忍受力极强，压根就没想去寻找解决方法。

　　可是，我，是万难不能接受这种丑陋的解决方式的。有没有优雅的解决方法呢，于是在网上搜索到了doT.js。

　　主页很简洁，就一个页面，研究了一下，就顺利的上手了，相当的简单易用。主要分两步走。

1、写模板

写模板，就用官方文档里提供给你的三板斧就搞定了，当然总共不止三个：

{{ }} 　　　　for evaluation　模板标记符

{{= }}　　　　for interpolation　输出显示，默认变量名叫it

{{! }}　　　　for interpolation with encoding　编码后输出显示

{{# }}　　　　for compile-time evaluation/includes and partials　输出显示预定义（还没用过）

{{## #}}　　　for compile-time defines　预定义（还没用过）

{{? }}　　　　for conditionals　条件分支，if条件的简写

{{~ }}　　　　for array iteration　遍历数组

上面按照自己的理解，简单的翻译标记了一下大概意思，也不知对不对O(∩_∩)O~

主要就用到三个，{{= }}变量输出、{{? }}条件分支、和{{~ }}遍历数组。

2、调用模板，生成最终的HTML，把HTML放到对应的地方去就可以了

调用模板，这没啥好说的，把官方代码拷贝过来就行了，下面是一个完整的代码。

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <title>test</title>

 5 </head>

 6 <body>

 7     <h1>this is doT.js test.</h1>

 8

 9     <ul id="list">

10         <!-- 下面是模板，一般推荐写在<head>里，我比较喜欢写在相对应的标签里 -->

11         <script id="test_tmpl" type="text/x-dot-template">

12             {{? it && it.length > 0}}

13                 {{~ it :value}}

14                     <li>

15                         name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>

16                         &nbsp;

17                         age: {{=value.age}}

18                     </li>

19                 {{~}}

20             {{?}}

21         </script>

22     </ul>

23

24     <script src="js/jquery-1.11.2.min.js"></script>

25     <script src="js/doT.min.js"></script>

26 </body>

27

28 <script type="text/javascript">

29     $(function(){

30         var data = [

31             {name:'bananaplan', age:31},

32             {name:'wangxiaozhu', age:18}

33         ];

34

35         var tempFn = doT.template($('#test_tmpl').html());

36         var resultText = tempFn(data);

37

38         console.log(resultText);

39

40         $('#list').html(resultText);

41     });

42

43     function click_me(value) {

44         console.log(value);

45         alert(JSON.stringify(value));

46     }

47 </script>

48

49 </html>

代码没什么难度，先写模板，然后调用模板，生成最终想要的HTML代码段，最后将其放到对应的dom节点下即可。

　　但在这个看似简单的过程中，我遇到并解决了一个问题。

　　请注意第15行，原来不是这么写的，而是这样的:

name: <a href="javascript:click_me({{=value}})">{{=value.name}}</a>

我的意思是，想把整个对象传递给click_me函数，但是这么写报错，于是想那能不能先传json字符串过去，然后在函数里自己再parse一下，于是就改成了下面这样：

name: <a href="javascript:click_me({{=JSON.stringify(value)}})">{{=value.name}}</a>

结果，还是报错。注意，上面这段代码里，我用的是{{= }}，而不是{{! }}。因为没有将引号之类的编码，所以会报错，最后，我改成了下面这个最终版的，就ok了：

name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>

所以，如果想传递对象，需要将json对象转为字符串，并且编码之后才行。

　　如此，解决了我的一大问题，不用费劲的拼接HTML了，并且在使用doT.js的过程中，也没有拦路虎了。

　　网上关于doT.js的资料倒是不多，如果，有缘人看到这里，希望这篇文字对你有所帮助。

 
 
标签: doTjs

前端javascript模板的更多相关文章

  1. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

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

    我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...

  3. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  4. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  5. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  6. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  7. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  8. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

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

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

随机推荐

  1. 全栈project师的毁与誉

    全栈(Full Stack)project师.也能够叫全端project师,不管是前端知识,还是后端架构你都要了解.甚至有些调皮的程序猿这样理解全栈project师:全栈project师 = 屌丝战斗 ...

  2. poj1260

    给定n类等级的珍珠 每类的珍珠都有需求的个数ai,和价格pi 为了防止游客只买1颗珍珠,所以购买ai个珍珠时,要加上10个的价格 即(ai+10)*pi 有时,购买高等级的珍珠代替低等级的珍珠时,可能 ...

  3. gitLab添加ssh key

    电脑新装了一台虚拟机,想要和gitLab建立一个安全的ssh连接,步骤如下 1.本机生成ssh key 系统环境:Linux 使用root用户登录,执行命令:ssh-keygen -t rsa -C ...

  4. [改变自己wordpress.2]至wordpress再加上简单的debug sql调试.

    或者说,同事. 需要帮助她打印出来sql 调试输出到页面sql 在这里,我们使用插件或一个的方式来启动配置文件wordpress的debug 在插件文件夹 wordpress/wp-content/p ...

  5. Java多线程的wait(),notify(),notifyAll()

    在多线程的情况下.因为多个线程与存储空间共享相同的过程,同时带来的便利.它也带来了访问冲突这个严重的问题. Java语言提供了一种特殊的机制来解决这类冲突,避免同一数据对象由多个线程在同一时间访问. ...

  6. SpringSecutiry权限管理手册

    SpringSecutiry权限管理手册: 请见以下URL: http://www.mossle.com/docs/auth/html/preface.html Spring Security 参考文 ...

  7. chain pattern

    16.4 纯与不纯的职责链模式 职责链模式可分为纯的职责链模式和不纯的职责链模式两种:        (1) 纯的职责链模式 一个纯的职责链模式要求一个具体处理者对象只能在两个行为中选择一个:要么承担 ...

  8. Android：自己定义PopupMenu的样式（显示图标/设置RadioButton图标）

    PopupMenu是Android中一个十分轻量级的组件.与PopupWindow相比,PopupMenu的可自己定义的能力较小,但使用更加方便. 先上效果图: 本例要实现的功能例如以下: 1.强制显 ...

  9. Linux新手命令

    给老婆写了一份速成培训教材--最经常使用的命令及解释.当然每一个人工作内容不同,经常使用命令也不同,这仅仅是我的个人经验,并且要考虑到接受者的基础. ls:列出文件夹下的内容,类似于dos下的dir. ...

  10. IOS --- 日期时间格式 更改

    1.怎样怎样将一个字符串如" 20110826134106"装化为随意的日期时间格式.以下列举两种类型:    NSString* string =@"201108261 ...