在browser浏览器中使用Handlebars
1 基本语法
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
2 通过script标签放置模板
<script type="text/template" id="avatarTpl">
<div class="info_block">
<div class="info_block_left">
<span>头像修改</span>
</div>
<div class="info_block_right">
<div class="modify_avatar">
<div class="modify_avatar_left" id="avatar_drag_container">
<img src="/images/common/avatar_wrapper.png" alt="" class="p1">
<img src="/images/common/p3.jpg" alt="" class="p2">
</div>
<div class="modify_avatar_right">
<div class="modify_avatar_right_top">从电脑中选择一张你的照片上传</div>
<div class="modify_avatar_right_bot">
<div class="upload_btn" id="avatar_upload_container">
<input name="token" type="hidden" value="{{token}}">
<input name="key" type="hidden" value="{{qiniuKey}}">
<input type="file" id="avatar_upload">
上传图片
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</script>
3 使用Handlebars.compile来预编译模板
//用jquery获取模板 var tpl = $("#tpl").html(); //原生方法 var source = document.getElementById('#tpl').innerHTML; //预编译模板 var template = Handlebars.compile(source); //模拟json数据 var context = { name: "zhaoshuai", content: "learn Handlebars"}; //匹配json内容 var html = template(context); //输入模板 $(body).html(html);
4 内置helper
with
改变作用域
each
数据循环
if else helper 条件渲染
判断条件成立
1 {{#if list}} 2 <ul id="list"> 3 {{#each list}} 4 <li>{{this}}</li> 5 {{/each}} 6 </ul> 7 {{else}} 8 <p>no list</p> 9 {{/if}}
不过内置的helper都不好用，一般我们需要自定义新的helper
Handlebars.registerHelper("debug", function(optionalValue) {
//do sth
});
有用的tips
- 在上下文中，通过../跳出当前上下文，进入上一级
- 模板文件可以保存为hbs后缀，通过gulp-handlebars插件，预编译模板为.js文件，直接引用即可。
Node express中使用handlebars
使用hbs的npm包
var hbs = require('hbs')
app.set('view engine', 'hbs');
// 注册partial __dirname是当前目录 partials目录下放置所有的公共partials 通过{{}}引用
hbs.registerPartials(__dirname + '/views/partials');
创建layout.hbs
//隐藏了html的框架 其中header body footer都是公用的内容
<body>
{{> header}} {{{body}}} {{> footer}}
</body>