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. 双向绑定 TwoWay MVVM

    1前台代码 <Grid> <StackPanel > <Grid x:Name="gridOne"> <Grid.Resources> ...

  2. cocos2d-x3.0 实现HTTP请求GET、POST

    HTTP请求实现 把以下代码拷贝到新创建的project中就能看到效果 HelloWorldScene.h #include "cocos2d.h" /*记得要引头文件*/ #in ...

  3. java正則表達式的坑

    java中正則表達式比較有意思,这里列举几个常见的坑 1.[]符号,中括号表示当中的数据都是或的关系 假设[\\w+]是匹配条件 abc能否够匹配的到呢? 首先\\w(注意这里没有中括号)表示a-z ...

  4. Akka边学边写(3)-- ByteString介绍

    Akka的IO层设计能够參考这篇文档,本文简介一下ByteString的设计. Immutable消息 Actor之间是通过消息沟通的.但为了避免同步问题,消息必须是Immutable. 因此.Akk ...

  5. MongoDB获得短暂的

    大约MongoDB该数据是现在比较少.和大多数英文网站.最上面的经笔者从官方网站翻译.请翻译或误解之处请作证.然后,我们将继续关注MongoDB,和翻译“Developer Zone”和“Admin ...

  6. Follow your hear(跟着心走)

    端午三天的哈尔滨之旅已经over,非常开心真的非常开心.听了刘四风老师的"为爱开讲.我爱这世界"的论坛,尽管.这三天老师讲的不多.可是句句是精华.Follow your heart ...

  7. FusionCharts简单教程---建立第一个FusionCharts图形

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  8. poj2386Lake Counting

    题意是这种.给你一个N*M的矩形图.这个图由两个东西组成.'.'和'W', W代表这个地方有水. .代表这个地方没水. 假设一个有水的地方它的上下左右,左上,坐下.右上.右下也有水,那么 就看成它们连 ...

  9. TCP拥塞控制 (1)

    Basic: TCP,传输控制协定,它是目前最广泛使用的网络传输协议.SMTP.SSH.FTP.HTTP等因特网底层协议均是TCP. TCP面向连接,提供端到端的数据可靠传输.连接时三次握手.断开是四 ...

  10. Android使用Activity用作弹出式对话框

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/23116115 Android中可用于实现对话框的有Dialog,PopupWin ...