前端 template.js 模板用法

1.首先引用template.js然后在html中定義一個空的容器 class名為“quotation”

<div class="quotation"></div>

2.在script中 定義ID名"template-quotation" 注意type type="text/template"
script 中可以把所有html標簽包裹在內 把從后台調取的值 用<@=data.code@>的方式賦值

<script type="text/template" id="template-quotation">
　　<span><@=data.code@></span>
</script>

3.ajax調用接口數據

$.ajax({
　　headers: { token: localStorage.getItem('access_token') },
　　type: "post",
　　async: true,
　　dataType: "json",
　　data: { goods_type: goods_type },
　　url: local + "Goods/goods",
　　success: function(data) {
　　　　console.log(data)

4.把獲取到的數據通過template模板賦值給data 在上面取值即可

$('.quotation').html(template($('#template-quotation').html(), {
　　　　data: data
　　}));
}
}）

如需判斷的情況 如下

<@if(data.housingProperty==1 && data.isConfirm == 0){@>
　　<div class="mui-bar mui-bar-tab posiBot-button">
　　<button class="js-conform">方案確認</button>
</div>

如需循環的情況如下

<@if(data.lstDefectWAttachment.length>0){@>
　　<div class="photo">
　　<@for(var i=0;i<data.lstDefectWAttachment.length;i++){var one=data.lstDefectWAttachment[i];@>
　　<@if(one.attachmentSubType == 2){@>
　　<img src="<@=one.attachPath@>"/>
　　<@}else if(one.attachmentSubType == 3){@>
　　<video controls preload="auto" poster="static/css/img/vidio-tu.png" src="<@=one.attachPath@>"></video>
<@}@>
<@}@>
</div>
<@}@>
<@}@>

------------------------