模板引擎之Hogan.js
来自CloudWiki
什么是hogan
Hogan是一个非常简单的模板引擎，可以把它理解成Mustuche语法的编译器。Hogan简单到只有六七条语法，可以说是目前最简单的模板引擎了，估计以后也仍然会是的。
hogan代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/hogan.js/3.0.2/hogan.js"></script>
<script>
var tab = {
data: {
"list":[
{"name":"lily", "age":18, "food":"苹果"},
{"name":"lucy", "age":20, "food":"香蕉"}
]
},
init: function() {
this.onload()
},
onload: function() {
// 定义模板
var tpl =
'{{#list}}'+
'<div>我叫{{name}}, 今年{{age}}岁, 最爱吃{{food}}</div>'+
'{{/list}}'
var result = this.renderHtml(tpl, {list:this.data.list});
$('#wrapper').html(result)
},
renderHtml : function(tpl, data){
var template = Hogan.compile(tpl);
var result = template.render(data);
return result;
}
}
$(function() {
tab.init()
})
</script>
</body>
</html>
hogan的作用
hogan.js能够帮助我们在网页前端动态的生成代码，经常有一些后台传来的数据，
在没有这样的模板引擎之前，我们只能用for循环遍历，但是有了hogan之后，
只要定义一个模板，我们就可以用hogan将数据渲染进这个模板里面去，非常的省事；同时生成的代码可以嵌入到我们前端的html代码之中。
hogan的语法
循环
// 记住 这个list是你自己定义的 比如上面就有 list:thid.data.list
// 这里的list也有判断是否存在的意思 比如说你的数据里面压根就没有...
{{#list}}
...
{{/list}}
判断
// 假如你去淘宝购物, 搜索某不可描述之商品, 然后搜不到 那就是没有产品列表
// 但是什么都不显示肯定不友好 所以当list(商品)不存在, 就显示下面的
{{^list}}
您所搜索的商品不存在...
{{/list}}
枚举
// 上面给的例子,里面都是key:value的形式 but...
// 例如: list: ['张三', '李四' .....] 这时怎么办?? {{.}} 枚举..
{{#list}}
今天值班的有{{.}}
{{/list}}
转义
{{{name}}}
// 数据：
{ name : '<span color="red">Rosen</span>' };
// 模板
<div>Hey! I am {{{name}}}!</div>
// 结果
<div>Hey! I am <span color="red">Rosen</span>!</div>
大括号能怎么样？还是读取一个变量，只不过name是个html片段的话，这里不对html编码，放在dom里就是一段dom。
参考文档：
