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