首页 > 代码库 > 进击的handlebars前后端模板引擎

进击的handlebars前后端模板引擎

2024-09-30 11:04:02   219人阅读

 

技术分享

 

在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="http://www.mamicode.com/images/common/avatar_wrapper.png"  class="p1">
                    <img src="http://www.mamicode.com/images/common/p3.jpg"  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="http://www.mamicode.com/{{token}}">
                            <input name="key" type="hidden" value="http://www.mamicode.com/{{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

  1. 在上下文中，通过../跳出当前上下文，进入上一级
  2. 模板文件可以保存为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>

 

进击的handlebars前后端模板引擎


联系
我们