template-web.js: 高性能模板引擎art-template渲染html

art-template模板渲染HTML

该方法的核心思想就是将json数据传入按照art-template模板编写模板中去。

filename: 对于模板的script标签的id;data: js获取的数据（一般是后端返回的序列化json字符串） // 基于模板名渲染模板 template(filename, data);

这样就可以把这部分的模板添加到template模板中去，更多的详情可以参考art-template网站

具体示例参考如下：

前端部分

下载template-web.js文件，在HTML文件中导入，并编写包含渲染的script标签。

<!-- file: course_teacher.html --> {% extends 'cms/base.html' %} {% load rest_framework %} {% block title %} 课程老师 {% endblock %} {% block head %} {# 引入arttemplat #} <script src="{% static 'js/template-web.js' %}"></script> <script src="{% static 'js/index.js' %}"></script> {% endblock %} {% block main %} <div class="box-body"> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>姓名</th> <th>职称</th> <th>简介</th> <th>操作</th> <th>头像</th> </tr> </thead> <tbody id="course-teacher-list"> <script id="course-teacher-list-tmpl" type="text/html"> {# 该标签是django标签(阻止模板引擎呈现此block标记的内容)，用于指示包裹的文件不处理，只作为字符串 #} {% verbatim %} {{ each course_teachers as teacher }} <tr data-pk="{{ teacher.id }}" data-name="{{ teacher.username }}" data-jobtitle="{{ teacher.jobtitle }}" data-profile="{{ teacher.profile }}" data-avatar="{{ teacher.avatar }}"> <td>{{ teacher.id }}</td> <td>{{ teacher.username }}</td> <td>{{ teacher.jobtitle }}</td> <td>{{ teacher.profile }}</td> <td><img src="{{ teacher.avatar}}" alt="" style="height: 40px"></td> <td> <button id="edit-btn" type="button" class="btn btn-warning btn-xs edit-btn">编辑</button> <button class="btn btn-danger btn-xs delete-btn">删除</button> </td> </tr> {{ /each }} {% endverbatim %} </script> </tbody> </table> </div> {% endblock %} // file: course_teacher.js // 老师信息js渲染方法 function getTeacherInfo () { $.get("/cms/course_teacher_list/?format=json", function (resp) { if(resp){ $("#course-teacher-list").html(template("course-teacher-list-tmpl", {course_teachers:resp})); }else { console.log("django-rest-framework没有返回数据！"); } }); }

后端部分

通过'"/cms/course_teacher_list/?format=json"'请求返回序列化的json数据，返回数据类型示例：

[ { "id": 7, "username": "马云", "jobtitle": "董事会成员", "profile": "阿里巴巴创始人", "avatar": "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1775658611,2908181310&fm=74&app=80&f=JPEG&size=f121,140?sec=1880279984&t=110d52194c540f019513ffa7b0bc367e" }, ...... { "id": "", "username": "", "jobtitle": "", "profile": "", "avatar": "" } ]

最终效果