18 javascript viewengine node.js express hogan.js
我正在使用Node.js + Express开发一个站点并使用视图引擎Hogan.js.
这是我的档案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'));
});
该文件/routes/index.js是:
/*
* 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'
}
);
};
在/views文件夹中,有:
| - part.hjs
| - index.hjs
| - cv.hjs
该文件part.hjs是:
<h3>Hello {{ author }}</h3>
该文件index.hjs是:
<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.
该文件about.hjs是:
<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.
我有两个问题:
/routes/index.js吗？最好的问候,Vi.
小智 25
我找到了第一个问题的解决方案.
首先,我删除了hjs:
npm remove hjs
然后,我安装了包hogan-express:
npm install hogan-express
此外,我编辑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.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'));
});
而且routes/index.js:
exports.index = function(req, res) {
res.locals = {
title: 'Title',
};
return res.render(
'index',
{
partials:
{
part: 'part',
}
}
);
};
现在,/views有index.html,part.html.该文件part.html包含:
<h1>{{ title }}</h1>
该文件index.html包含:
{{> part}}
Hello world!
所以,它工作正常.
至少在Express 4+中,部分功能开箱即用.您可以使用带有--hogan或-H选项的express-generator(来自npm).
完成后,您需要向render方法添加部分:
router.get('/', function(req, res, next) {
res.render('index',
{
title: 'My Site',
partials: {header: 'header'}
});
});
然后,在您的模板中使用{{> xxx}}
<body>
{{> header }}
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
</body>
注意:这在视图中有header.hjs
| 归档时间： |
|
| 查看次数： |
20404 次 |
| 最近记录： |