Question

我在hbs wrapper中使用了handlebars.js express.js。我有模板工作正常，但我需要添加部分以使用我的视图进行渲染。

我想做这样的事情：

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

然而，它正在抛出“无法找到标题部分”。

如果我将一个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' })
};

在我的views文件夹中，我有三个模板：

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

在我的index.hbs文件中，我用：

调用'headPartial'部分

{{> headPartial}}

非常感谢任何帮助。

Answer 1

这个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);
});

Answer 2

为方便起见，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}}

干杯！

Answer 3

看起来像创建变量并手动拉入模板代码可以工作：

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

以后：

hbs.registerPartial('headPartial', headerTemplate);

Answer 4

对我来说，我有模板文件my-partial.hbs

然后我尝试通过以下方式访问它们：

{{> my-partial }}

但无论文件名如何，部分都以hbs格式存储为my_partial。

这要归功于hbs版本3.1.0第218行

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

这是readme

Answer 5

对我来说，我的功能如下：

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 ，然后使用 statupfunc.registerOneHbsPartials 注册gulp watch以注册新创建的部分内容

gulp.task('watch', function() {
    gulp.watch(resource.src.views +  '/partials/*.*', statupfunc.registerOneHbsPartials);
});

Answer 6

我的应用程序结构（使用ExpressJS和HBS-NPM）是：

  APP FOLDER
    -src
      app.js
      - routers
      - views
        -- partials
              header.hbs



const hbs = require('hbs')
hbs.registerPartials(path.join(__dirname,'views','partials'))

上面完成了一次加载所有部分的工作。只要您相信它不会影响您的性能即可使用（即使不需要，也可以加载所有部分）。

然后，按如下所示在任何HBS文件中使用此部分文件：

{{> partial_file_name_without_hbs_extension}}

示例

 {{> header}

Express.js hbs模块 - 从.hbs文件注册部分

6 个答案: