doT js 常见错误-阿里云开发者社区

doT js 常见错误

2016-05-11 2302

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

   Html代码  
    
  
<!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中,如下:

   Html代码  
    
  
<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 报错了.
解决方法:使用如下方法还原

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

处理模板的js:

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

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

doT js 常见错误

热门文章

最新文章

相关课程

相关电子书

相关实验场景