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中的内容进行了转义:
< | < ; |
> | > ; |
即把小于号变成了< ; ,这不是我预期的.因为html把<转化成了< ;,所以doT 报错了.?
解决方法:使用如下方法还原
?
/*** * Html解码获取Html实体<br> * ‘<‘--> ‘<‘ * @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
?
?
原文:http://hw1287789687.iteye.com/blog/2224951