带有 Node.js + Express + Hogan.js 的部分答案

【问题标题】：Partials with Node.js + Express + Hogan.js带有 Node.js + Express + Hogan.js 的部分
【发布时间】：2012-09-28 19:34:04
【问题描述】：

我正在使用 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 中的值分配吗？

最好的问候，维。

【问题讨论】：

感谢您发布这个问题。嘘。谷歌搜索了一下，直到我偶然发现了这个宝石。
我认为奥伦的回答是这个问题的正确答案。
这里运行的是哪个版本的 express？
什么是部分？

标签： javascript node.js express viewengine hogan.js

【解决方案1】：

我找到了第一个问题的解决方案。

首先，我删除了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!

所以，它工作正常。

【讨论】：

现在不需要删除hjs，只需在render中追加partials:{ var: file_path }
@user1775888 是正确的......至少对于快递 4+。我在另一个答案中对此进行了扩展

【解决方案2】：

至少在 Express 4+ 中，partials 是开箱即用的。您可以将 express-generator（来自 npm）与 --hogan 或 -H 选项一起使用。

完成之后，你需要在渲染方法中添加部分：

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

【讨论】：

【解决方案3】：

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

现在，yourMainView.html：

<p>Something Something Something</p>
{{{partialHTML}}}
<p>Bla Bla Bla</p>

注意三重“{”而不是通常的双倍！告诉 hogan (mustache) 将其解析为 HTML 而不是字符串！

就是这样。

【讨论】：

您知道如何将分配给 Javascript 变量吗？类似于：但是有了 html 转义字符等的安全性。????

【解决方案4】：

至于您的部分问题，如果您使用consolidate.js，您可以简单地这样做：

res.render('index', {
  partials: {
    part  : 'path/to/part'
  }
});

【讨论】：

【解决方案5】：

这是个问题。在 Express 3 中很难获得部分支持。

您最好的选择是： https://github.com/visionmedia/consolidate.js npm install consolidate

这些补丁采用不同的方法为 Hogan 添加局部：

不幸的是，引擎本身没有基于文件系统的部分的钩子，所以我认为人们对如何以及在哪里实现部分感到困惑。我最终使用了 LinkedIn 的 Dust.js 实现，因为已经有了部分支持。 Master其实有更好的支持，另外我昨天提交了相对路径的补丁。

乔什

【讨论】：

非常感谢。我可以找到使用 hogan-express 包的局部解决方案。与巩固有区别吗？哪个更好？
Consolidate 可能有对局部的实际支持。在下面列出的解决方案中，您必须转发声明所有部分并将它们传递到选项哈希中。这有点不方便，但并非不可行。在其他语言中，您可以只说 {>partial/}，它会直接从文件系统中提取部分内容。

【解决方案6】：

我会使用mmm 而不是hjs。

https://github.com/techhead/mmm

免责声明：我写了这个包。

只需将所有出现的hjs 替换为mmm，partials 就会开始工作。上面的链接中有更多信息和示例。

至于您的另一个问题，如果您想在多个视图之间共享属性，您有几个选择。

当您调用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 视图引擎。

但是，对于mmm，请参阅表示逻辑下的部分，了解将值绑定到模板或模板集的更多方法。

【讨论】：

我遇到了类似的问题，我不想遵循下一个解决方案并将部分变量显式传递给我的模板。我现在要试试mmm。希望这有效。我已经尝试过 hulk-hogan，但发现它不适用于 express 3.x
不好的建议。如果 OP 已经使用 hjs 完成了大量工作怎么办。更改模板引擎来解决这样一个简单的问题是大材小用