有多少人一直被官网,这坑坑的讲解所迷或
不废话,直接上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>
这是一个神奇的世界,需要神奇的人去发现新大陆!