常用的模板引擎有tpl.js、baiduTemplate、doT.js、art-template等等；

我所理解的模板引擎就是把js數據傳到html中展示出來；

art-template 是一個簡約、超快的模板引擎。

art-template有兩種語法：

一、標準語法可以讓模板更容易讀寫；

二、原始語法具有強大的邏輯處理能力。

?

引入模板

<script src="js/template-web.js" type="text/javascript" charset="utf-8"></script>

定義模板

<script id="classify" type="text/html">{{each data}}<div class="classify"><a href="javascript:;"><img src="{{$value.category_image}}" alt=""><p class="index-class-text">{{$value.name}}</p></a></div> {{/each}}</script><div class="fenleibox" id="fenleibox"></div>

?

上面的模板我用的循環作為例子，具體更多的語法請到官方網站文檔查看

請求數據，將數據傳給模板

$.ajax({type:"post",url:"xxxxxxxx",//請求地址 dataType:"json",success:function(data){// 調用模板引擎的方法，填充數據var html = template("classify",data);var divResult = document.querySelector("#classifybox");//這是模板循環外面的div divResult.innerHTML = html;},});

?

json數據

?

最終效果

?

轉載于:https://www.cnblogs.com/gaozhihui/p/10219395.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的必须掌握的前端模板引擎之art-template的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。