当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 关于artTemplate的循环嵌套

关于artTemplate的循环嵌套

2017年12月21日  | 移动技术网IT编程  | 我要评论
好处

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

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

{{$value.user}}

{{/each}} {{/if}} 原生版 
<%if (admin){%>
    <%for (var i=0;i
<%=i%>. <%=list[i].user%>

    <%}%>
<%}%>

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


 




<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}}
        		

        			{{$value.title}}
        			{{include 'art4' $value}}
        		

        	{{/each}}
        </script>
        <script id="art4" type="text/html">
        	
        		{{each tags}}
        			{{$value.tags}}
        		{{/each}}
        	
        </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}}
        		

        			{{$value.title}}
        			{{include 'art4' $value.tags}}
        		

        	{{/each}}
        </script>
        <script id="art4" type="text/html">
        	
        		{{each x}}
        			{{$value.tags}}
        		{{/each}}
        	
        </script>

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

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网