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>

 

這是一個神奇的世界，需要神奇的人去發現新大陸！