Juicer 輕量級javascript模板引擎
阿新 • • 發佈:2019-01-23
程式碼示例
<!DOCTYPE html>
<html>
<head>
<title>Juicer</title>
<meta charset=UTF-8>
<!--引入jquery-->
<script src="/static/jquery/jquery-1.11.1.min.js"></script>
<!--引入juicer-->
<script type="text/javascript" src="/static/js/ceshi/juicer.js" ></script>
</head>
<body>
<!--下面是模板-->
<script id="tpl" type="text/template">
<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來接收渲染結果-->
<div id="result"></div>
<script type="text/javascript">
var data={
list:[
{name:'firstname' ,show:true},
{name:'secondname',show:false},
{name:'thirdname',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); //得到渲染結果,需要放到DOM元素中才能在頁面中顯示
console.log(html)//編譯模板並立即渲染出結果,如沒有下一句頁面看不到結果
$("#result").html(html);
</script>
</body>
</html>