artTemplate子模板include

 

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

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>

 

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

 

  

 

你可能感兴趣的:(template)