• 进击的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

    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>
  • 相关阅读:
    一文让你明白Redis持久化
    spring-data-redis 2.0 的使用
    中间自适应布局的5种解法
    php实现只需要一个QQ号就可以获得用户信息
    基于LINUX下的进程管理问题
    【初码干货】记一次分布式B站爬虫任务系统的完整设计和实施
    初码-爬虫系列-文章目录
    初码-阿里云系列-文章目录
    初码-Azure系列-存储队列的使用与一个Azure小工具(蓝天助手)
    初码-Azure系列-记一次MySQL数据库向Azure的迁移
  • 原文地址:https://www.cnblogs.com/bhaltair/p/6820549.html
Copyright © 2020-2023  润新知