1.简介
Juicer 是一个高效、轻量的前端模版引擎,好处可以在前端页面使得视图模型与数据的分离。(可以运行在node.js )
2.使用
1.引用
1).Install::npm i juicer
2).
下载代码地址:Github Link
项目中引用:<script type="text/javascript" src="juicer-min.js"></script>
2.一般使用
1.语法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34a.使用${} 输出变量,支持自定义函数
${name}
${name|function}
//自定义的函数
var testFun = function(data){
return '<a href="'+data.href+'" alt = "'+data.alt+'"/>'
}
//注册/注销自定义函数
//jucer.register('function name',function)
juicer.register('test_Fun',testFun)
//juicer.unregister('test_Fun')
var json = {
links: [
{href: 'http://juicer.name', alt: 'Juicer'},
{href: 'http://benben.cc', alt: 'Benben'},
{href: 'http://ued.taobao.com', alt: 'Taobao UED'}
]
};
var tpl= [
'{@each links as item }',
'${item|test_Fun} <br/>',
'{@/each}'
].join('')
//编译模版并根据所给数据立即渲染结果
juicer(tpl,json)
//先编译,返回函数,再渲染数据
var compiled_tpl = juicer(tpl);
var htm = compiled_tpl.render(data);
//转义问题
使用$${变量}避免转义
1 | b.循环和判断 |
1 | c.注释 |
1 | e.子模板嵌套 {@include tpl, data} |
1 | f. Node.hs 使用 |
3..net demo
.net 项目中,使用Razor引擎。
1).定义模版
注意点:由于@在razor中是关键字,所以在razor中使用Juicer,需要使用@@ 代表@1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40HTML 代码
<div id="ChildCon" class="row-border ChildCondition">
<div id="Conditions" style="padding: 50px 50px 50px 50px;">
</div>
<div class="row-border" style="padding: 0 50px 10px 50px; margin-top: -30px;text-align:center">
<button id="Goback" class="btn btn-default pull-left" title="Back"><i class=" fa fa-arrow-left fa-xs"></i></button>
<button id="GoSearch" class="btn btn-default" title="Search"><i class=" fa fa-search fa-xs"></i></button>
</div>
</div>
<script id="tpl" type="text/template">
<div class="row">
<div class="form-horizontal">
{@@each list as lt}
<div class="form-group col-lg-4">
{@@each lt.key as lkey}
<label class="col-sm-4 control-label noPaddingRigt">${lkey.label}:</label>
{@@if lkey.type==1}
<div class="col-sm-8">
<select style="width: 80%" class="form-control">
{@@each lt.value as lval}
{@@if lval.default==1}
<option value="${lval.ovalue}" selected>${lval.otext}</option>
{@@else}
<option value="${lval.ovalue}">${lval.otext}</option>
{@@/if}
{@@/each}
</select>
</div>
{@@else if lkey.type==0}
<div class="col-sm-8">
<input id="${lkey.id}" style="width:80%" class="form-control" placeholder="${lt.value}" />
</div>
{@@/if}
{@@/each}
</div>
{@@/each}
</div>
</div>
</script>
`
1 | Js 代码 |