进击的handlebars先后端模板引擎

时间 2019-11-21

标签进击 handlebars 后端模板引擎繁體版

原文原文链接

在browser浏览器中使用Handlebarshtml

1 基本语法jquery

<div class="demo">  
    <h1>{{name}}</h1>
    <p>{{content}}</p>
</div>

2 经过script标签放置模板express

<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来预编译模板npm

    //用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 内置helperjson

withgulp

改变做用域浏览器

eachapp

数据循环框架

if else helper 条件渲染ui

判断条件成立

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>