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": ""
}
]