<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script id="tpl" type="text/juicer">
<ul>
{@each list as it,index}
<li>${it.name} (index: ${index})</li>
{@/each}
{@each blah as it}
<li>
num: ${it.num} <br />
{@if it.num==3}
{@each it.inner as it2}
${it2.time} <br />
{@/each}
{@/if}
</li>
{@/each}
</ul>
</script>
<div id="container">
</div>
<script src="js/jquery.js"></script>
<script src="js/juicer.js"></script>
<script src="js/test.js"></script>
</body>
</html>
其中juicerjs官网下载: http://juicer.name/docs/docs_zh_cn.html
test.js:
var data={
list:[
{name:'guokai',show:true},
{name:'benben',show:false},
{name:'dier',show:true}
],
blah:[
{num:1},
{num:2},
{num:3,inner:[
{'time':'15:00'},
{'time':'16:00'},
{'time':'17:00'},
{'time':'18:00'}
]},
{num:4}
]
};
var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);
$("#container").html(html);