artTemplate有原生语法和简洁语法两种语法，在一个页面中简洁语法与原生语法不能混用，否则会残生冲突，所以你首先得确定你要用简洁语法还是原生语法。因此，下面通过artTemplate简洁语法渲染一种稍微复杂一点的数据结构。我下面会列举两种这样的数据结构的实现方式。
第一种实现方式如下：
类似的数据结构是这样的:
<script type="text/javascript">var data1 = {list: [{title: '周一',tag: {x: [{MNAME:"申请运输品种的相关药品生产批准证明文件复印件（生产批准证明文件不能体现所运品种还需提供质量标准等文件）（申请单位是经营企业的，可不提供该材料）",}, {MNAME:"购用批准证明文件（申请单位是经营企业的，可不提供该材料）",}, {MNAME:"《药品经营许可证》",}, {MNAME:"《药品生产许可证》",}]}},{title: '周二',tag: {x: [{MNAME:"申请运输品种的相关药品生产批准证明文件复印件（生产批准证明文件不能体现所运品种还需提供质量标准等文件）（申请单位是经营企业的，可不提供该材料）",}, {MNAME:"购用批准证明文件（申请单位是经营企业的，可不提供该材料）",}, {MNAME:"《药品经营许可证》",}, {MNAME:"《药品生产许可证》",}]}}]};-
var html = template("art3",data1);
$("#content").append(html);
创建模板
<script id="art3" type="text/html">{{each list}}<div><h2>{{$value.title}}</h2>{{include 'art4' $value.tag}}</div>{{/each}}</script><script id="art4" type="text/html">{{each x}}<h4>{{$value.MNAME}}</h4>{{/each}}</script>
上面这种实现渲染的方式也能渲染这种稍微复杂的数据结构。但是。有如下缺点：
1、前端开发人员需要点头哈腰的改数据结构，改成上面这种数据结构(前提是后端开发人员提供的不是上面这种数据结构)
2、你让后台改成这样的数据结构，你有没有考虑到这段代码的时间复杂度和空间复杂度，嵌套循环的层数越多，返回到前台的速度就越慢。
第二种实现方式如下：
数据结构：
var course = [ {course_name : "课程",subcourse : [ {subcourse_name : "计算机专业课程",subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]} ]}, {course_name : "课程",subcourse : [ {subcourse_name : "计算机专业课程",subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]} ,{subcourse_name : "计算机专业课程",subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]} ]} ];var data = {courses : course}var html = template("template", data);$("#course").html(html);
创建模板
<script type="text/template" id="template">{{each course}}<li><div class='cyList'>{{$value.course_name}}</div>{{each $value.subcourse}}<dl class='cy-detail'><dt>{{$value.subcourse_name}}</dt>{{each $value.subsubcourse}}<dd>{{$value}}</dd>{{/each}}</dl>{{/each}}</li>{{/each}}</script>
第二种实现方式的优点就是再也不找后台帮忙改数据结构了，提供给前端什么样的数据结构，我都能使用这样的模板渲染数据到页面上面。
彩蛋！彩蛋！彩蛋！
其实，还有第三种实现方式，那就是使用nodeJS，哈哈哈，厉害吧，我们可以使用nodeJS修改数据结构，改成我们自己想要的数据结构，这次，就永远不用考虑后台提供什么样的数据结构了，哈哈哈，这种方式时不时很厉害。
有什么不明白的，可以给我留言，我会及时回复的。