2016-08-02 4 views
3

これは私の意見のフォルダ構造です:koa-views +ハンドルバーでメインレイアウトとパーシャルをレンダリングするにはどうすればいいですか?

- 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: '/' 
    }); 
}); 

私がしたいことがちょうどそれであれば同様に、メインのレイアウトファイルとパーシャルフォルダを定義することですexpress-handlebarsにありました。実際にkoa-viewsと純粋なhandlebarsでこれを達成する方法はありませんか?

私はkoa-hbsまたはkoa-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 

をEDIT:

koa v2と互換性がありませんkoa-hbskoa-handlebarsプラグインのように思えます。だから今はhandlebarsと表示されたkoa v2partialslayoutsを使用する方法はありませんか? :(handlebarsは役に立たない(layoutspartialsを定義する)これらがなければそうはまだexpressでstucked ...

答えて

3

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

しかし、あなたはおそらくそれの利便性だけでいえ起動時にあなたの全体のパーシャルフォルダをロードします。

  1. Promiseを作成し、partialsフォルダを読み取る関数を実行し、handlebars.registerPartialを介して各部分を登録します。彼らはすべてが登録されているときに約束を解決する必要があります。
  2. これらのパーシャルが

を登録する前に、あなたのアプリケーションは、任意のビューをレンダリングしないように、ここで私が使用例ですが、解決すべきという約束を待ちミドルウェア非同期を作成します。

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でうまくいきます。

+0

ありがとうございました!私は 'koa v2'を使用します。 – Lanti

関連する問題