使用artTemplate模板引擎渲染复杂数据结构

artTemplate有原生语法和简洁语法两种语法，在一个页面中简洁语法与原生语法不能混用，否则会残生冲突，所以你首先得确定你要用简洁语法还是原生语法。因此，下面通过artTemplate简洁语法渲染一种稍微复杂一点的数据结构。我下面会列举两种这样的数据结构的实现方式。

第一种实现方式如下：

类似的数据结构是这样的:

1. <script type="text/javascript">
2. var data1 = {
3. list: [{
4. title: '周一',
5. tag: {
6. x: [{
7. MNAME:"申请运输品种的相关药品生产批准证明文件复印件（生产批准证明文件不能体现所运品种还需提供质量标准等文件）（申请单位是经营企业的，可不提供该材料）",
8. }, {
9. MNAME:"购用批准证明文件（申请单位是经营企业的，可不提供该材料）",
10. }, {
11. MNAME:"《药品经营许可证》",
12. }, {
13. MNAME:"《药品生产许可证》",
14. }]
15. }
16. },
17. {
18. title: '周二',
19. tag: {
20. x: [{
21. MNAME:"申请运输品种的相关药品生产批准证明文件复印件（生产批准证明文件不能体现所运品种还需提供质量标准等文件）（申请单位是经营企业的，可不提供该材料）",
22. }, {
23. MNAME:"购用批准证明文件（申请单位是经营企业的，可不提供该材料）",
24. }, {
25. MNAME:"《药品经营许可证》",
26. }, {
27. MNAME:"《药品生产许可证》",
28. }]
29. }
30. }
31. ]
32. };

33. var html = template("art3",data1);
    $("#content").append(html);

创建模板

1. <script id="art3" type="text/html">
2. {{each list}}
3. <div>
4. <h2>{{$value.title}}</h2>
5. {{include 'art4' $value.tag}}
6. </div>
7. {{/each}}
8. </script>
9. <script id="art4" type="text/html">
10. {{each x}}
11. <h4>{{$value.MNAME}}</h4>
12. {{/each}}
13. </script>

---

上面这种实现渲染的方式也能渲染这种稍微复杂的数据结构。但是。有如下缺点：
1、前端开发人员需要点头哈腰的改数据结构，改成上面这种数据结构(前提是后端开发人员提供的不是上面这种数据结构)
2、你让后台改成这样的数据结构，你有没有考虑到这段代码的时间复杂度和空间复杂度，嵌套循环的层数越多，返回到前台的速度就越慢。

---

第二种实现方式如下：

数据结构：

1. var course = [ {
2. course_name : "课程",
3. subcourse : [ {
4. subcourse_name : "计算机专业课程",
5. subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]
6. } ]
7. }, {
8. course_name : "课程",
9. subcourse : [ {
10. subcourse_name : "计算机专业课程",
11. subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]
12. } ,{
13. subcourse_name : "计算机专业课程",
14. subsubcourse : [ "Java", "数据结构", "计算机组成原理", "数据库" ]
15. } ]
16. } ];
17. var data = {
18. courses : course
19. }
20. var html = template("template", data);
21. $("#course").html(html);

创建模板

1. <script type="text/template" id="template">
2. {{each course}}
3. <li>
4. <div class='cyList'>{{$value.course_name}}</div>
5. {{each $value.subcourse}}
6. <dl class='cy-detail'>
7. <dt>{{$value.subcourse_name}}</dt>
8. {{each $value.subsubcourse}}
9. <dd>{{$value}}</dd>
10. {{/each}}
11. </dl>
12. {{/each}}
13. </li>
14. {{/each}}
15. </script>

第二种实现方式的优点就是再也不找后台帮忙改数据结构了，提供给前端什么样的数据结构，我都能使用这样的模板渲染数据到页面上面。

彩蛋！彩蛋！彩蛋！

其实，还有第三种实现方式，那就是使用nodeJS，哈哈哈，厉害吧，我们可以使用nodeJS修改数据结构，改成我们自己想要的数据结构，这次，就永远不用考虑后台提供什么样的数据结构了，哈哈哈，这种方式时不时很厉害。

有什么不明白的，可以给我留言，我会及时回复的。