JS_0037:template 模板引擎使用
阿新 • • 發佈:2020-08-27
引入引擎檔案template.js
1,定義引擎模組
<script type="text/html" class="card-tpl"> <!-- 生成案例列表迴圈 --> <%for(var i = 0;i < cards.length; i++){%> <div class="card-wrap" name="<%:=cards[i].proAddr%>"> <img src="<%:=cards[i].img%>" alt="" class="left"> <span class="card-title"> <%:=cards[i].title%> </span> <span class="card-slogen"><%:=cards[i].slogen%></span> </div> <%}%> </script>
2,讀取json資料並賦值生成html標籤
$.get("../data/url.json", function(t) { var a = document.getElementsByClassName("card-tpl")[0].innerHTML, n = template(a, { cards: t.data }); $(".cards-part").append($(n)), bindClickEvt(), loaded() })
json資料格式