JavaScript模板引擎--art-template

Posted 2021-06-22 两点黑眼圈

网址：http://aui.github.io/art-template/docs/

1、在对应网址下载js文件art-template.js，并引入<script src="./resources/art-template.js"></script>

2、定义对应的模板
    //插入的为html，所以type取值“text/html”，取值方式{{属性名}}
    <script type="text/html" id="tpl">
        <h5 class="text-truncate">{{bookName}}</h5>
         <img class="img-fluid" src="{{cover}}">
    </script>

3、通过ajax后台调用，返回json格式循环遍历
    ...    
    success：function(json){
        var list = json.records;
        for(var i = 0 ; i < list.length ; i++){
             var book = json.records[i];
             //将数据结合tpl模板,生成html；其中tpl为模板中的id
             var html = template("tpl" , book);
             $("#bookList").append(html);
        }
    }  
    ...