artTemplate子模板include

 

有多少人一直被官网,这坑坑的讲解所迷或

 

不废话,直接上demo

demo1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script type="text/html" id="temp2">
    <div>
        <ul>
        {{each contents}}
              <li>{{$value.content}}</li>
        {{/each}}              
        </ul>
    </div>
</script>
           
<script type="text/html" id="temp1">
{{each list}}
    <div>
        <h2>{{$value.title}}</h2>
        {{include 'temp2' $value.a}}
    </div>
{{/each}}
</script>
   
  
<script type="text/javascript">
    $(function(){
         
          var data = {
              list:[
                  {
                        title:"这是一个测试标题1",
                        a:{
                            contents:[
                                {"content":"这是一段内容1"},
                                {"content":"这是一段内容1"},
                                {"content":"这是一段内容1"}
                            ]
                        }
                  },
                  {
                        title:"这是一个测试标题2",
                        a:{
                            contents:[
                                {"content":"这是一段内容2"},
                                {"content":"这是一段内容2"},
                                {"content":"这是一段内容2"}
                            ]
                        }
                  }
              ]
          };
           
          var html = template('temp1', data);
          $("#main").html(html);
           
         
    });
</script>

  

 

demo2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/html" id="temp2">
            <div>
                <ul>
                {{each}}
                      <li>{{$index+1}} / {{$value.image}}</li>
                {{/each}}              
                </ul>
            </div>
        </script>
                   
        <script type="text/html" id="temp1">
        {{each list}}
            <div>
                <h2>{{$value.title}}</h2>
                {{include 'temp2' $value.images}}
            </div>
        {{/each}}
        </script>
           
          
        <script type="text/javascript">
            $(function(){
                  var data = {
                      list:[
                          {
                                title:"这是一个测试标题1",
                                contents:[
                                    {"content":"这是一段内容11"},
                                    {"content":"这是一段内容12"},
                                    {"content":"这是一段内容13"}
                                ],
                                images:[
                                    {"image":"这是一张图片11"},
                                    {"image":"这是一张图片12"},
                                    {"image":"这是一张图片13"}
                                ]
                          },
                          {
                                title:"这是一个测试标题2",
                                contents:[
                                    {"content":"这是一段内容21"},
                                    {"content":"这是一段内容22"},
                                    {"content":"这是一段内容23"}
                                ],
                                images:[
                                    {"image":"这是一张图片21"},
                                    {"image":"这是一张图片22"},
                                    {"image":"这是一张图片23"}
                                ]
                                 
                          }
                      ]
                  };
                  var html = template('temp1', data);
                  $("#main").html(html);
            });
        </script>

 

这是一个神奇的世界,需要神奇的人去发现新大陆!

 

  

 

posted @   求知若渴,虚怀若愚  阅读(9045)  评论(3编辑  收藏  举报
努力加载评论中...
原来是这样!我和我的小伙伴都惊呆了!
点击右上角即可分享
微信分享提示