web-dev-qa-db-fra.com

Module Express.js hbs - enregistrez des partiels à partir d'un fichier .hbs

J'utilise le handlebars.js hbs wrapper in express.js . Les modèles fonctionnent bien, mais j'ai besoin d'ajouter des partiels à rendre avec mes vues.

J'aimerais faire quelque chose comme ça:

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

Cependant, il lance un "en-tête partiel ne peut pas être trouvé".

Je peux faire en sorte que registerPartial fonctionne si je passe une chaîne de code html au second paramètre, mais j'aimerais utiliser des fichiers d'affichage distincts pour mes partiels. 

Je n'ai trouvé aucune documentation à ce sujet, mais j'espère ne pas pouvoir oublier quelque chose de facile.

Est-ce que quelqu'un sait comment utiliser les fichiers de vue dans la méthode registerPartial? Si oui, comment puis-je implémenter cela?

METTRE À JOUR

Pour donner plus de contexte, laissez-moi ajouter plus de code. Voici mon fichier "serveur" - 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);

Et voici mon fichier routes.index:

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

Dans mon dossier de vues, j'ai trois modèles:

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

Dans mon fichier index.hbs, j'appelle le partiel 'headPartial' avec:

{{> headPartial}}

Toute aide est grandement appréciée.

node.jsexpresshandlebars.js
25
swatkins

Ce code charge tous les modèles partiels d’un répertoire et les rend disponibles par nom de fichier:

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);
});
40
Ben Williamson

Pour plus de commodité, registerPartials fournit un moyen rapide de charger tous les partiels à partir d'un répertoire spécifique:

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

Les partiels chargés à partir d'un répertoire sont nommés en fonction de leur nom de fichier, les espaces et les traits d'union étant remplacés par un caractère de soulignement:

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

À votre santé!

38
milyord

On dirait que créer une variable et extraire manuellement le code du modèle fonctionne:

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

et ensuite:

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

Pour moi, j'avais un fichier modèle my-partial.hbs

Ensuite, j'ai essayé d'y accéder via:

{{> my-partial }}

Mais le partial était stocké dans hbs sous le nom de my_partial quel que soit le nom du fichier.

C’est grâce à hbs version 3.1.0 ligne 218

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

Ceci est dans le readme

1
Dan Baker

Pour moi, j'ai une fonction comme:

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

Exécutez statupfunc.registerHbsPartials au démarrage de l'application, puis enregistrez gulp watch avec statupfunc.registerOneHbsPartials pour enregistrer des partiels sur une nouvelle création.

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