常用的模板引擎有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>

定义模板

  1. <script id="classify" type="text/html">
  3. {{each data}}
  5. <div class="classify">
  6.  
  7. <a href="javascript:;">
  8.  
  9. <img src="{{$value.category_image}}" alt="">
  10.  
  11. <p class="index-class-text">{{$value.name}}</p>
  12.  
  13. </a>
  14.  
  15. </div>
  17. {{/each}}
  18.  
  19. </script>
  20.  
  21. <div class="fenleibox" id="fenleibox">
  22.  
  23. </div>

 

上面的模板我用的循环作为例子，具体更多的语法请到官方网站文档查看

请求数据，将数据传给模板

  1. $.ajax({
  3. type:"post",
  5. url:"xxxxxxxx",//请求地址
  7. dataType:"json",
  9. success:function(data){
  11. // 调用模板引擎的方法，填充数据
  12.  
  13. var html = template("classify",data);
  15.  
  17. var divResult = document.querySelector("#classifybox");
  19. //这是模板循环外面的div
  21. divResult.innerHTML = html;
  23. },
  25. });

 

json数据

 

 

最终效果

 

 

版权声明：本文为gaozhihui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/gaozhihui/p/10219395.html