进击的handlebars前后端模板引擎

Posted 2020-09-21 弗朗西斯科

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进击的handlebars前后端模板引擎相关的知识，希望对你有一定的参考价值。

在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>

以上是关于进击的handlebars前后端模板引擎的主要内容，如果未能解决你的问题，请参考以下文章

在服务器端模板引擎上使用 React 或 Vue

handlebars——另外一个模板引擎