hbs 入门教程 - 文章教程

hbs 入门教程

发布于 2021-08-12 字数 2630 浏览 838 评论 0

以下代码来自 hbs 官方 demoapp.js,可以看到,依赖于 express

// 3rd party
var express = require('express');
var hbs = require('hbs');

var app = express();

// set the view engine to use handlebars
app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

app.use(express.static(__dirname + '/public'));

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name) {
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];
    return val;
});

app.get('/', function(req, res){
    res.render('index');
});

app.listen(3000);

通过断点,可以看到,express 最后调用了 hbs.__express(filename, options, cb)。其中

  • flename:编译的模版路径
  • options:编译模版时,传入的数据。以及express内部的一些配置,挂在options.settings上
  • cb:回调方法,参数为模版编译出来的文本内容

那么,事情就很简单了。只需要人工调用 hbs.__express(filename, options, cb) 这个方法就可以了。

hbs without express

var hbs = require('hbs'),
    Handlebars = require('handlebars'),
    fs = require('fs'),
    path = require('path'),
    grunt = require('grunt');

var views = path.resolve('views'),
    dest = path.resolve('dest'),
    filename = path.resolve(views, 'index.hbs'),
    destname = path.resolve(dest, 'index.html'),
    settings = {
        views: views
    },
    options = {
        title: 'hbs without express',
        nick: 'casper',
        settings: settings
    };

var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name, context) {
    var len = (blocks[name] || []).length;
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];

    if(!len){
        return context.fn(this);
    }else{
        return val;
    }
});

hbs.__express(filename, options, function(err, res){
    grunt.file.write(destname, res);
});

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81923 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0