doTjs的坑 說多了都是淚。 總是報Uncaught SyntaxError: Unexpected token :
原因是 解析的模版中註釋掉了一部分原始碼,註釋也解析了估計是。
下面都是正確的寫法。
<script id="act-template_doctor" type="text/x-dot-template"> {{~it:value:index}} <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-inner"> <div class="aui-list-item-title aui-margin-b-10"> <span class="aui-font-size-16 experts_title">{{=value.deptName}}</span> </div> {{~value.list:v:i}} <div class="aui-row"> <div class="aui-col-xs-4 aui-padded-l-5">{{=v.roomNo}}</div> <div class="aui-col-xs-6 aui-padded-l-5">{{=v.doctorName}}醫生</div> <div class="aui-col-xs-2 aui-padded-r-10 aui-font-size-20 experts_num">{{=v.clinicNo}}</div> </div> {{~}} <div class="aui-list-item-text aui-margin-t-5"> 更新於:{{=parseInt(v.sendDiff/60)}}分鐘{{=parseInt(v.sendDiff%60)}}秒前 </div> </div> </div> </li> {{~}} </script>
附上學習的doTjs的用法,有我的整合,基本全了,該注意的也有了。拿走不謝!!!
doT.js 語法簡介
1、最常規用法{{=it.attr}}
<span>姓名:{{=it.name}}</span>
2、迴圈陣列{{~}}
{{~it:value:index}} <li><span>姓名:{{=value.name}}</span></li>
3、條件渲染{{?}}{{??}},相當於原生的if else if {{~}}
{{?!value.age}}
<li><span>年齡:年齡資料缺失</span></li>
{{??!value.fun}}
<li><span>愛好:無趣的人</span></li>
{{??}}
<li><span>年齡:{{=value.age}}</span><span>愛好:{{=value.fun}}</span></li>
{{?}}
* {{? typeof it[prop]==’object’ }} 表示條件判斷,結束標籤是{{?}}
4、編碼渲染{{!}},主要是為了防止程式碼注入以保障安全,如傳入一個HTML片段或js片段,它會以字串的形式渲染
{"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
愛好:<span>{{!value.html}}</span>
親測在模板裡{{= XXX}}、或者{{? XXX}}、即在"{{}}"內是可以直接使用全域性變數以及方法名、 以及運算子
1.比如 {{= hostUrl + it.imageUrl}} 這裡的hostUrl 為一個全域性變數
2.{{= sayHello() }}這裡sayHello()是一個有返回值的方法
3.使用三目運算子 {{? it.open ? "true":"false"}} 則條件真的時候返回true, 假的時候返回false