Ich entwickle eine Site mit Node.js + Express und verwende als View Engine Hogan.js.
Dies ist meine Datei app.js
:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'hjs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
app.get('/about', routes.about);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
Die Datei /routes/index.js
lautet:
/*
* GET pages.
*/
exports.index = function(req, res){
res.render(
'index',
{
title: 'Home Page',
author: 'Bruce Wayne'
}
);
};
exports.about = function(req, res){
res.render(
'about',
{
title: 'About Page',
author: 'Bruce Wayne'
}
);
};
Im Ordner /views
befinden sich:
| - part.hjs
| - index.hjs
| - cv.hjs
Die Datei part.hjs
lautet:
<h3>Hello {{ author }}</h3>
Die Datei index.hjs
lautet:
<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.
Und die Datei about.hjs
lautet:
<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.
Ich habe zwei Fragen:
- Wie kann ich die Partials auf meinen Seiten richtig verwenden? (Dieser Code funktioniert nicht)
- Kann ich denselben "Titel" für zwei oder mehr Seiten verwenden, ohne die Wertezuweisung in Datei
/routes/index.js
zu wiederholen?
Viele Grüße, Vi.
6 Antworten
Ich habe eine Lösung für die erste Frage gefunden.
Zuerst habe ich hjs
entfernt:
npm remove hjs
Dann habe ich das Paket hogan-express
installiert:
npm install hogan-express
Außerdem habe ich app.js
bearbeitet:
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
app.engine('html', require('hogan-express'));
app.enable('view cache');
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser('your secret here'));
app.use(express.session());
app.use(app.router);
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
app.get('/users', user.list);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
Und routes/index.js
:
exports.index = function(req, res) {
res.locals = {
title: 'Title',
};
return res.render(
'index',
{
partials:
{
part: 'part',
}
}
);
};
Nun gibt es in /views
index.html
, part.html
. Die Datei part.html
enthält:
<h1>{{ title }}</h1>
Die Datei index.html
enthält:
{{> part}}
Hello world!
Also, es funktioniert gut.
Wenn Sie consoleate.js verwenden, können Sie einfach Folgendes tun:
res.render('index', {
partials: {
part : 'path/to/part'
}
});
Ich würde mmm
anstelle von hjs
verwenden.
https://github.com/techhead/mmm
Haftungsausschluss: Ich habe das Paket geschrieben.
Ersetzen Sie einfach alle Vorkommen von hjs
durch mmm
und Partials beginnen zu funktionieren. Es gibt viel mehr Informationen und ein Beispiel unter dem obigen Link.
Bei Ihrer anderen Frage haben Sie mehrere Optionen, wenn Sie Eigenschaften für mehrere Ansichten freigeben möchten.
Wenn Sie res.render(name, options)
aufrufen, wird das options
tatsächlich auf res.locals
und app.locals
zusammengeführt, bevor es an die Rendering-Engine übergeben wird. Um eine app-weite Eigenschaft festzulegen, können Sie sie daher einfach app.locals
zuweisen.
app.locals.title = "Default Title"; // Sets the default title for the application
Dieses Konzept gilt wirklich für nahezu jede Express 3 View Engine.
Für mmm
finden Sie jedoch im Abschnitt unter Präsentationslogik weitere Möglichkeiten zum Binden von Werten an eine Vorlage oder einen Satz von Vorlagen.
Das ist ein Problem. Teilweise Unterstützung ist in Express 3 schwer zu bekommen.
Ihre beste Wette ist: https://github.com/visionmedia/consolidate.js npm install consolidate
Diese Patches verfolgen unterschiedliche Ansätze zum Hinzufügen von Partials für Hogan:
- https://github.com/visionmedia/consolidate.js/pull/51
- https://github.com/visionmedia/consolidate.js/pull/29
Leider hat die Engine nativ keinen Hook für Dateisystem-basierte Partials, daher denke ich, dass die Leute verwirrt sind, wie und wo Partials implementiert werden sollten. Am Ende hatte ich die Implementierung von LinkedIn Dust.js, da bereits teilweise Unterstützung vorhanden war. Der Master hat sogar noch bessere Unterstützung, und ich habe gestern einen Patch für relative Pfade eingereicht.
Josh
Zumindest in Express 4+ funktionieren Partials sofort. Sie können den Express-Generator (ab npm) mit der Option --hogan oder -H verwenden.
Danach müssen Sie der Rendermethode Partials hinzufügen:
router.get('/', function(req, res, next) {
res.render('index',
{
title: 'My Site',
partials: {header: 'header'}
});
});
Verwenden Sie dann in Ihrer Vorlage {{> xxx}}
<body>
{{> header }}
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
</body>
HINWEIS: Dies hat header.hjs in Ansichten
Gehen Sie wie folgt vor, um Partials mit Express + Hogan zu verwenden:
app.get('/yourRoute', function(req, res){
res.render('yourPartial', function(err,html){
var partialHTML = html;
res.render('yourMainView', { myPartial: partialHTML }, function(err,html){
res.send(html);
});
});
}
Und jetzt yourMainView.html:
<p>Something Something Something</p>
{{{partialHTML}}}
<p>Bla Bla Bla</p>
Beachten Sie das dreifache '{' anstelle des doppelten, wie Sie es normalerweise tun! Das sagt Hogan (Schnurrbart), dies als HTML und nicht als String zu analysieren!
Das ist es.