前端 template.js 模板用法

Posted 小白洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 template.js 模板用法相关的知识,希望对你有一定的参考价值。

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>
<@}@>
<@}@>
































以上是关于前端 template.js 模板用法的主要内容,如果未能解决你的问题,请参考以下文章

Mako

thymeleaf前端数据绑定

art-template简单使用

powershell 这将复制SharePoint网站。首先使用原始网站使用的相同模板制作空白网站。如果templa,这将失败

js模板引擎-art-template常用

js模板引擎-art-template常用总结