1.首先引用template.js然后在html中定义一个空的容器 class名为“quotation”
<div class="quotation"></div>
2.在script中 定义ID名"template-quotation" 注意type type="text/template"
script 中可以把所有html标签包裹在内 把从后台调取的值 用<@[email protected]>的方式赋值
<script type="text/template" id="template-quotation">
<span><@[email protected]></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="<@[email protected]>"/>
<@}else if(one.attachmentSubType == 3){@>
<video controls preload="auto" poster="static/css/img/vidio-tu.png" src="<@[email protected]>"></video>
<@}@>
<@}@>
</div>
<@}@>
<@}@>
原文地址：https://www.cnblogs.com/xulongyang/p/8918716.html