如何使用koa-views +把手渲染主要布局和部分?

时间:2016-08-02 22:28:48

标签: javascript handlebars.js koa

这是我的观看文件夹结构:

- views
  - layouts
      layout.hbs
  - partials
      part.hbs
  home.hbs

我正在渲染模板宽度:

app.use(views(__dirname + '/views', {
  extension: 'hbs',
  map: { hbs: 'handlebars' }
}));

router.get('/', async (ctx) => {
  await ctx.render('home', {
    Name: 'Iris',
    Type: 'Web',
    Path: '/'
  });
});

我想要的是定义主布局文件和partials文件夹,就像它在express-handlebars中一样。真的没有办法通过koa-views和纯handlebars实现这一目标吗?

我必须使用koa-hbskoa-handlebars?但他们使用很快弃用的功能(和Handlebars v2.0.0,v3.0.0):

koa deprecated Support for generators will been removed in v3.
See the documentation for examples of how to convert old middleware
https://github.com/koajs/koa/tree/v2.x#old-signature-middleware-v1x app.js:45:5

修改

似乎koa-hbskoa-handlebars插件与koa v2不兼容。那么目前无法使用koa v2呈现partialslayoutshandlebars吗? :(没有那些(定义{{​​1}},layoutspartials没用。所以仍然坚持handlebars ......

1 个答案:

答案 0 :(得分:4)

koa-hbs真的只是在引擎盖下使用把手.registerPartial

尽可能基本:

var handlebars = require('handlebars'),
    fs = require('fs')

handlebars.registerPartial(
    'defaultLayout',
    fs.readFileSync(__dirname + '/views/layouts/default.html', 'utf8')
)

// then continue with loading the application...

但是你可能希望它的便利性只是在启动时加载整个partials文件夹。

  1. 创建一个Promise,并有一个函数execute来读取您的partials文件夹,并通过handlebars.registerPartial注册每个部分。它应该在所有注册时解决Promise。
  2. 创建一个等待Promise得到解决的中间件异步,以便您的应用在注册这些部分之前不会呈现任何视图
  3. 以下是我使用的示例:

    var fs = require('fs'),
        handlebars = require('handlebars'),
        glob = require('glob'), // for convenience, npm install glob
        path = require('path')
    
    function readAsPromise (path) {
        return new Promise(function (resolve, reject) {
            fs.readFile(path, 'utf8', function (err, data) {
                resolve({path: path, data: data})
            })
        })
    }
    
    function registerPartial (partial) {
        var partialName = path.basename(partial.path, '.hbs')
    
        handlebars.registerPartial(partialName, partial.data)
    }
    
    var loadPartials = new Promise(function (resolve, reject) {
    
        glob('./views/partials/*.hbs', function (err, files) {
            Promise.all(files.map(readAsPromise)).then(function (partials) {
                partials.forEach(registerPartial)
                resolve()
            })
        })
    
    })
    

    现在的问题是你使用的是哪个版本的Koa

    // koa 1
    
    app.use(function* (next) {
        yield loadPartials
        yield next
    })
    
    // latest koa
    
    app.use(async (ctx, next) => {
      await loadPartials
    })
    

    现在正常使用车把中的部分。这适用于koa-views,需要相同的把手实例