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.
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);
});
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é!
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);
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
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);
});