zoukankan      html  css  js  c++  java
  • artTemplate子模板include

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

    不废话,直接上demo

    demo1:

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

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

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

      

  • 相关阅读:
    C结构体之位域(位段)
    Linux 有效用户组(effective group)与初始用户组(initial group)(参考鸟哥私房菜)
    牛顿迭代法求平方根
    操作系统 第5章 哲学家问题
    面试题3:数组中重复的数字
    某讯实习生后台开发一面总结
    面试题目4:二维数组中的查找
    Java基础知识之基本概念
    Maven常用命令
    Maven仓库
  • 原文地址:https://www.cnblogs.com/ningyanbo/p/4615186.html
Copyright © 2011-2022 走看看