doT js 常见错误

hw1287789687

浏览: 5194842 次
性别:
来自: 北京

最近访客更多访客>>

rbaggio10

zcm1205

morelily

beisika10368

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

doT js js模板 doT常见错误

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

查看图片附件

1
顶

0
踩

分享到：

Git 切换分支和merge分支 | json-lib把XML转化为json

2015-07-07 15:12
浏览 3073
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

doT js 常见错误

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

doT js 常见错误

评论

发表评论

相关推荐

js 给文本框增加快捷键

判断微信浏览器

jquery 设置checkbox 不可用

浏览器本地缓存localStorage

js 获取链接地址中的参数

js 修改链接参数

ios Safari浏览器不支持 js 复制字符串

html5 多图预览

监听IE9中输入框点击小叉

工作中出现的问题

jquery 遍历dom节点

js截断指定长度

HTML5 sessionStorage 使用

js 数组相关操作

react 常用技术

react-hammerjs的应用

js 获取dom的class

mobx 常用注解

js toast库

判断IE 浏览器的几种方式

最近访客更多访客>>