web-dev-qa-db-ja.com

Express.js hbsモジュール-.hbsファイルからパーシャルを登録

express.js でhandlebars.js hbs wrapper を使用しています。テンプレートは正常に機能していますが、ビューでレンダリングするパーシャルを追加する必要があります。

私はこのようなことをしたいと思います：

hbs.registerPartial('headPartial', 'header'); 
// where "header" is an .hbs file in my views folder

ただし、「ヘッダーパーシャルが見つかりません」がスローされます。

2番目のパラメータにhtmlの文字列を渡せば、registerPartialを機能させることができますが、パーシャルに個別のビューファイルを使用したいと思います。

これに関するドキュメントは見つかりませんでしたが、簡単なものが見当たらないことを願っています。

RegisterPartialメソッドでビューファイルを使用する方法を知っている人はいますか？もしそうなら、これをどのように実装しますか？

[〜＃〜]更新[〜＃〜]

より多くのコンテキストを提供するために、コードを追加します。これが私の「サーバー」ファイルです-app.js

var express = require('express')
, routes = require('./routes')
, hbs = require('hbs');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'hbs');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// this is the line that generates the error
hbs.registerPartial('headPartial', 'header'); 

// What I'm expecting is for "headPartial" to be a compiled template partial 
// of the template within views/header.hbs, but it is not loading this way.
// If I do something like hbs.registerPartial('headPartial', '<p>test</p>');
// then it does work. I need to know how to pass an .hbs file to the
// registerPartial method.

// Routes
app.get('/', routes.index);

app.listen(3000);

そして、これが私のroutes.indexファイルです：

exports.index = function(req, res){
  res.render('index', { title: 'Express' })
};

私のビューフォルダーには、3つのテンプレートがあります。

views/
  header.hbs (this is my partial)
  index.hbs
  layout.hbs

私のindex.hbsファイルで、「headPartial」パーシャルを次のように呼び出しています：

{{> headPartial}}

どんな助けでも大歓迎です。

node.jsexpresshandlebars.js
29
swatkins

次の code は、ディレクトリ内のすべての部分テンプレートをロードし、ファイル名で使用できるようにします。

var hbs = require('hbs');
var fs = require('fs');

var partialsDir = __dirname + '/../views/partials';

var filenames = fs.readdirSync(partialsDir);

filenames.forEach(function (filename) {
  var matches = /^([^.]+).hbs$/.exec(filename);
  if (!matches) {
    return;
  }
  var name = matches[1];
  var template = fs.readFileSync(partialsDir + '/' + filename, 'utf8');
  hbs.registerPartial(name, template);
});
42
Ben Williamson

便宜上、registerPartialsは、特定のディレクトリからすべてのパーシャルをロードする簡単な方法を提供します。

var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');

ディレクトリから読み込まれる部分文字は、ファイル名に基づいて名前が付けられます。スペースとハイフンは下線文字に置き換えられます。

template.html      -> {{> template}}
template 2.html    -> {{> template_2}}
login view.hbs     -> {{> login_view}}
template-file.html -> {{> template_file}}

乾杯！

40
milyord

変数を作成してテンプレートコードを手動でプルするように見えます：

var hbs = require('hbs')
  , fs = require('fs')
  , headerTemplate = fs.readFileSync(__dirname + '/views/_header.hbs', 'utf8');

以降：

hbs.registerPartial('headPartial', headerTemplate);
12
swatkins

私にとっては、テンプレートファイルmy-partial.hbsがありました

それから私はそれらにアクセスしようとしました：

{{> my-partial }}

しかし、パーシャルはファイル名に関係なくmy_partialとしてhbsに保存されました。

これは、hbsバージョン3.1.0行218のおかげです。

.slice(0, -(ext.length)).replace(/[ -]/g, '_').replace('\\', '/');

これは readme にあります

4
Dan Baker

私にとって、私は次のような機能を持っています：

var hbs = require('hbs');
var fs = require('fs');    
var statupfunc = {
      registerHbsPartials : function(){
        //this is run when app start
        hbs.registerPartials(__dirname + "/" + resource.src.views + '/partials');        
      },
      registerOneHbsPartials : function(event){ 
        //this is run for gulp watch
        if(event.type == 'deleted')
        {
          return;
        }   
        var filename = event.path;
        var matches = /^.*\\(.+?)\.hbs$/.exec(filename);
        if (!matches) {
          return;
        }    
        var name = matches[1];    
        var template = fs.readFileSync(filename, 'utf8');    
        hbs.registerPartial(name, template);    
      }
    };

アプリの起動時にstatupfunc.registerHbsPartialsを実行し、次にgulp watchをstatupfunc.registerOneHbsPartialsで登録して、新規作成時にパーシャルを登録します

gulp.task('watch', function() {
    gulp.watch(resource.src.views +  '/partials/*.*', statupfunc.registerOneHbsPartials);
});
1
Hoàng Nghĩa