<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./juicer-min.js"></script>
</head>
<body>
<div id="app"></div>
<script id="tpl" type="text/template">
<ul>
{@each list as it,index}
<li>123${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}
${name}
</ul>
</script>
<script>
var data = {
list: [{
name: ' guokai',
show: true
},
{
name: ' benben',
show: false
},
{
name: ' dierbaby',
show: true
}
],
blah: [{
num: 1
},
{
num: 2
},
{
num: 3,
inner: [{
'time': '15:00'
},
{
'time': '16:00'
},
{
'time': '17:00'
},
{
'time': '18:00'
}
]
},
{
num: 4
}
],
name:'jack'
};
var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);
//html是一个字符串,需要在标签中渲染
document.getElementById('app').innerHTML = html
</script>
</body>
</html>
Juicer模板引擎
猜你喜欢
转载自blog.csdn.net/YML_426/article/details/120826700
今日推荐
周排行