首页 > Web开发 > 详细

doT js 常见错误

时间:2015-07-08 02:20:18      阅读:250      评论:0      收藏:0      [点我收藏+]

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>

?
bubuko.com,布布扣
?
但是我不太喜欢放在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>

?但是下面的代码就出现了问题:
bubuko.com,布布扣
?

报错信息如下:
bubuko.com,布布扣
?
这是为什么呢?因为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

?

?

doT js 常见错误

原文:http://hw1287789687.iteye.com/blog/2224951

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!