<!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>代码 + html模板 + 渲染 非常简单的生成了代码, 再也不用去for循环便利了
一般 我们生产这种代码 都是插入html里面, 还可以继续封装 ,继续省事
基本语法(够用)
1.循环
// 记住 这个list是你自己定义的 比如上面就有 list:thid.data.list
// 这里的list也有判断是否存在的意思 比如说你的数据里面压根就没有...
{{#list}}
...
{{/list}}2.判断
// 假如你去淘宝购物, 搜索某不可描述之商品, 然后搜不到 那就是没有产品列表
// 但是什么都不显示肯定不友好 所以当list(商品)不存在, 就显示下面的
{{^list}}
您所搜索的商品不存在...
{{/list}}3.枚举
// 上面给的例子,里面都是key:value的形式 but...
// 例如: list: ['张三', '李四' .....] 这时怎么办?? {{.}} 枚举..
{{#list}}
今天值班的有{{.}}
{{/list}}
4. 还有什么转义 如{{{list}}}, 这样就不会被编译...........好饿, 好困...