关于artTemplate的循环嵌套

好处

       使用artTemplate处理数据更加简便，且代码看起来更加整洁。

编写模板

     有两种形式的模板，简洁版和原生版。他们都写在有自己的id名且类型为text/html的javascript中。

     简洁版

         

{{if admin}}
    {{each list}}
         <div>{{$value.user}}</div>
    {{/each}}
{{/if}}

      原生版

   

<%if (admin){%>
    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

    关于artTemplate简洁版的循环嵌套问题，给出如下的例子

<div id="content"></div>

<script>
 $(function(){
    var data1 = {
       list : [{
          title :'周一',
          tags : [{
             "tags":'英语'},{
             "tags":'语文'},{
             "tags":'数学'},{
             "tags":'政治'}
          ]},{
          title : '周二',
          tags : [{
            "tags":'地理'}, {					         
            "tags":'体育'}, {				         
            "tags":'英语'}, {
	    "tags":'历史'}]					    
         }]					
 };

 var html = template("art3",data1);
 console.log(html);
 $("#content").append(html);
 })
</script>					     

<script id="art3" type="text/html">
        	{{each list}}
        		<div>
        			<h2>{{$value.title}}</h2>
        			{{include 'art4' $value}}
        		</div>
        	{{/each}}
        </script>
        <script id="art4" type="text/html">
        	<ul>
        		{{each tags}}
        			<li>{{$value.tags}}</li>
        		{{/each}}
        	</ul>
        </script>

注意： 1.要引入artTemplate

            2.script的id不要忘记设置，且type最好写一下

            3.{{include  ‘art4'  $value}}，表示调用id为art4的script。 如果数据tags下面还有一层x，这时嵌套的代码也要相应的变化。

    数据变成如下所示：

   

var data1 = {					    
             list : [{					        
                      title :'周一',					        
                      tags : {			        	
                             x:[{"tags":'英语'}, {							  
                                 "tags":'语文'}, {							    
                                 "tags":'数学'}, {							    
                                 "tags":'政治'}                                                           
                               ]}					            
                             },{					        
                       title : '周二',					        
                       tags :{					        	
                            x:[{"tags":'地理'}, {					        	
                                "tags":'体育'}, {					        	
                                "tags":'英语'}, {				        	
                                "tags":'历史'}]					        	
                      }					    
                   }]					
             };

    代码变成如下所示：           

<script id="art3" type="text/html">
        	{{each list}}
        		<div>
        			<h2>{{$value.title}}</h2>
        			{{include 'art4' $value.tags}}
        		</div>
        	{{/each}}
        </script>
        <script id="art4" type="text/html">
        	<ul>
        		{{each x}}
        			<li>{{$value.tags}}</li>
        		{{/each}}
        	</ul>
        </script>

  循环嵌套最主要的就是清楚循环的是哪一个变量，遍历的又是什么变量。