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>

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

  

原文地址:https://www.cnblogs.com/ningyanbo/p/4615186.html