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));
</body>
</html>
但是我不太喜歡放在script标簽中,我喜歡把模闆放在div中,如下:
<div id="conditionstmpl">
{{? it.name }}
{{?? !it.age == 0}}
<div>your age is {{=it.age}}</div>
{{??}}
you don't have age and still don't have a name?
{{?}}
</div>
var dataencode ={"name":"","age":0};
var intertext = dot.template($("#conditionstmpl").html());
但是下面的代碼就出現了問題:
報錯資訊如下:
這是為什麼呢?因為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