`

doT js 常见错误

阅读更多

doT 模板一般是放在script脚本里面的,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../doT.js"></script>
    <script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<script id="conditionstmpl">
    {{ if(!it.name){ }}
    <div> 你还没有名字</div>
    {{ } else { }}
    <div>Oh, I love your name, {{=it.name}}!</div>
    {{ }  }}
</script>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
    var dataEncode = {"name": "", "age": 31};
    var interText = doT.template($("#conditionstmpl").text());
    $("#condition").html(interText(dataEncode));
</script>
</body>
</html>

 

 
但是我不太喜欢放在script标签中,我喜欢把模板放在div中,如下:

<body>
<div id="conditionstmpl">
    {{? it.name }}
    <div>Oh, I love your name, {{=it.name}}!</div>
    {{?? !it.age == 0}}
    <div>Your age is {{=it.age}}</div>
    {{??}}
    You don't have age and still don't have a name?
    {{?}}
</div>
<hr/>
<div id="condition"></div>
<script type="text/javascript">
    var dataEncode ={"name":"","age":0};
    var interText = doT.template($("#conditionstmpl").html());
    $("#condition").html(interText(dataEncode));
</script>
</body>

 但是下面的代码就出现了问题:

 

报错信息如下:

 
这是为什么呢?因为js在获取div的内容时,自动把div中的内容进行了转义:

转义前 转义后
< &lt ;
> &gt ;

即把小于号变成了&lt ; ,这不是我预期的.因为html把<转化成了&lt ;,所以doT 报错了. 
解决方法:使用如下方法还原

 

/***
 * Html解码获取Html实体<br>
 *     '&lt;'--> '<'
 * @param value
 * @returns {*|jQuery}
 */
function htmlDecode(value){
    return $('<div/>').html(value).text();
}

 处理模板的js:

var evalText = doT.template(htmlDecode($invoiceListDot.html()));
                    $invoiceListDiv.html(evalText(invoiceInfoDtos));

 

参考:http://blog.csdn.net/hw1287789687/article/details/46671437

 

 

  • 大小: 80.1 KB
  • 大小: 76.2 KB
  • 大小: 14 KB
  • 大小: 14 KB
  • 大小: 15.4 KB
1
0
分享到:
评论

相关推荐

    Atom-language-dot,atom的dot(graphviz)包。为adopi/语言做出贡献.zip

    3. **自动补全**:在编写DOT代码时,提供智能提示,帮助快速输入常见的语句和属性。 4. **错误检查**:通过集成的Linter,可以在编写过程中检测语法错误,提升代码质量。 5. **图形预览**:可能提供预览功能,让用户...

    计算机软件毕业设计_DOT.NET源码网上车辆档案管理系统_计算机毕业设计源码_计算机毕业设计源代码.rar

    3. MVC模式:在DOT.NET Web开发中,Model-View-Controller(MVC)是一种常见的设计模式,它将业务逻辑、数据和用户界面分离,有利于代码的组织和维护。 4. Web服务:考虑到车辆档案可能与其他系统交互,如交通违章...

    计算机软件毕业设计_DOT.NET源码学生信息管理系统_计算机毕业设计源码_计算机毕业设计源代码.rar

    9. 错误处理与日志记录:为保证系统的稳定运行,开发者通常会实现错误处理机制,捕获和处理异常,并通过日志记录系统行为,方便后期排查问题。 10. 安全性:系统应考虑安全性措施,如身份验证和授权,防止未经授权...

    计算机软件毕业设计_DOT.NET源码_网上选课系统的设计与实现_计算机毕业设计源码_计算机毕业设计源代码.rar

    2. 网上选课系统:这是一个常见的校园信息化应用场景,系统通常包括学生选课、课程管理、教师管理、学分计算等功能模块。在设计时,需考虑用户权限、并发处理(例如,多学生同时选课)、数据一致性等复杂问题。 3. ...

    计算机软件毕业设计_DOT.NET源码简易博客网站的设计与实现_计算机毕业设计源码_计算机毕业设计源代码.rar

    本文将详细解析“计算机软件毕业设计_DOT.NET源码简易博客网站的设计与实现”这一主题,主要涉及.NET框架、ASP.NET Web应用程序开发、数据库设计以及用户体验优化等关键知识点。 首先,.NET框架是微软公司推出的一...

    js实现内容显示并使用json传输数据

    3. **dot.js**: dot.js是一个小型的JavaScript模板引擎,它允许开发者将HTML结构和JavaScript数据结合在一起。在这个项目中,`doT.template()`函数被用来编译模板,将JSON数据插入到HTML元素中。 4. **HTML**: HTML...

    dot_env

    在IT行业中,`dot_env`是一个常见的术语,它与配置环境变量有关,特别是在Node.js和Python等编程语言的项目中。`dot_env`文件通常是一个简单的文本文件,用于存储应用程序的敏感信息,如数据库连接字符串、API密钥或...

    thorJs:轻量级的JS库。 欢迎大家加入开发团队!

    错误和建议应发送给renie [dot] webdev [at] gmail [dot] com。 执照 该软件已获得MPL 2.0许可的许可。 有关更多信息,请阅读 常见问题-用户 如何使用? 如果只想使用,可以从github下载完整的项目,然后使用“ ...

    JavaScript练习:用JavaScript编写的问题的解决方案

    "JavaScript练习:用JavaScript编写的问题的解决方案"是一个旨在帮助学习者提升JavaScript技能的资源集合,其中包含了各种常见问题的解答,有助于加深对JavaScript语法和概念的理解。 1. **基础语法** - 变量声明...

    压缩包解压工具

    - **doT.js**:一个轻量级的JavaScript模板引擎,用于生成动态HTML。 - **custom_event.js**:可能包含自定义事件处理的JavaScript代码。 - **chrome_webui_apis.js**:可能包含Google Chrome浏览器中Web UI相关的...

    JavaScript实现构造json数组的方法分析

    这里,我们讨论如何在JavaScript中有效地构造JSON数组,以及如何避免常见错误。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于...

    常见文件类型扩展名详解.docx

    17. **JS**: JavaScript源文件,用于网页的客户端脚本语言。 18. **LOG**: 日志文件,记录程序运行时的事件和错误。 19. **MID**: MIDI音乐文件,存储音乐的乐谱数据而非音频流。 20. **MP3**: 第三层MPEG音频文件,...

    selastzipk

    4. `doT.min.js`:这是一个轻量级的JavaScript模板引擎,常用于服务器端渲染或客户端的数据绑定。 5. `chrome_webui_apis.js`:这可能是一个针对Google Chrome浏览器WebUI(Web用户界面)API的实现,用于扩展或定制...

    用CSS简单实现的点按钮选择文件的小例子

    这个功能在许多网页应用中都很常见,比如上传文件或者提交表单。我们先从基本的HTML结构开始,然后添加CSS样式来美化我们的点按钮。 首先,我们需要在HTML文件中创建一个`&lt;input&gt;`元素,其`type`属性设置为`file`,...

    js代码-前端笔试第二题

    在JavaScript(简称JS)这个广泛使用的前端编程语言中,笔试题常常用来测试开发者的基本技能和对语言特性的理解。"js代码-前端笔试第二题"很可能是针对JS的一个实际问题或者场景,要求解决一个特定的编程挑战。由于...

    java面试题及技巧3

    │ J2EE综合--Struts常见错误的全面汇总.txt │ java程序员面试资料.zip │ JAVA笔试题(上海释锐).pdf │ MIME简介.txt │ SCJP试题详解.pdf │ SQL面试题_心灵深处.htm │ Struts+Hibernate+Spring轻量级J2EE...

    域名判断后跳转

    此外,JavaScript的语法错误在上述示例中存在,例如`elseif`应为`else if`。 ### 结论 域名判断后的跳转技术是网站管理和优化的重要组成部分,它可以帮助开发者更好地控制用户访问流程,提高用户体验。通过以上ASP...

    javascript ajax类AJAXRequest2007-12-31 更新

    **JavaScript AJAX 类库 AJAXRequest 更新详解** AJAXRequest 是一个专为简化AJAX应用程序开发而设计的轻量级框架,适用于Firefox、...通过这些更新,开发者可以更高效地构建AJAX应用程序,同时避免常见的问题和冲突。

    JS实现时间校验的代码

    JavaScript(简称JS)在Web开发中扮演着非常重要的角色,其中涉及到时间处理的场景非常常见,例如验证用户输入的时间是否在特定范围内,或者活动开始和结束的时间提示等。本文将详细介绍如何使用JavaScript实现时间...

Global site tag (gtag.js) - Google Analytics