hbs 入门教程

Question

以下代码来自 hbs 官方 demo，app.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);
});