部分与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的值赋值？
最好的问候，六。
我find了第一个问题的解决scheme。
首先，我删除了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!
所以，它工作正常。
至less在Express 4+中，局部variables只是开箱即用。 你可以用-hogan或-H选项来使用express-generator（来自npm）。
这样做后，你需要添加部分渲染方法：
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
要使用Express + Hogan部分，只需执行以下操作：
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); }); }); }
现在，您的MainView.html：
<p>Something Something Something</p> {{{partialHTML}}} <p>Bla Bla Bla</p>
注意三倍“{”，而不是像往常一样加倍！ 这告诉hogan（胡子）parsing这个HTML而不是一个string！
而已。
至于你的部分问题，如果你使用巩固 .js你可以简单地做：
res.render('index', { partials: { part : 'path/to/part' } });
这是个问题。 Express 3中很难提供部分支持。
你最好的select是： https ： //github.com/visionmedia/consolidate.js npm install consolidate
这些补丁采用不同的方法来为Hogan添加部分：
- https://github.com/visionmedia/consolidate.js/pull/51
- https://github.com/visionmedia/consolidate.js/pull/29
不幸的是，这个引擎本身并没有挂钩基于文件系统的partials，所以我认为人们对于partials应该如何实现以及在哪里实现是困惑的。 我结束了LinkedIn的Dust.js实现，因为部分支持已经存在。 大师其实有更好的支持，再加上我昨天提交了相对path的补丁。
玩笑
我会用mmm而不是hjs 。
https://github.com/techhead/mmm
免责声明：我写的包。
只需用mmmreplace所有的hjs ，部分将开始工作。 上面的链接有更多的信息和例子。
至于你的其他问题，如果你想跨多个视图共享属性，你有几个选项。
当你调用res.render(name, options) ，这些options实际上会被合并到res.locals和app.locals然后传递给渲染引擎。 因此，要设置应用程序范围的属性，您可以简单地将其分配给app.locals 。
app.locals.title = "Default Title"; // Sets the default title for the application
这个概念确实适用于任何Express 3 View Engine。
但是，对于具体的mmm ，请参阅演示逻辑下的部分，了解将值绑定到模板或模板集合的更多方法。