Javascript 带有Node.js+；Express+；Hogan.js_Javascript_Node.js_Express_Viewengine_Hogan.js

Javascript 带有Node.js+；Express+；Hogan.js

javascript node.js express

Javascript 带有Node.js+；Express+；Hogan.js,javascript,node.js,express,viewengine,hogan.js,Javascript,Node.js,Express,Viewengine,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');

我正在使用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'));
});

/**
 * 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'));
});

exports.index = function(req, res) {
  res.locals = {
    title: 'Title',
  };
  return res.render(
    'index',
    {
      partials:
      {
        part: 'part',
      }
    }
  );
};

文件

/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'
    }
  );
};

<h3>Hello {{ author }}</h3>

<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.

<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.

在

/views

文件夹中，有：

part.hjs

index.hjs

cv.hjs

文件

part.hjs

为：

/*
 * 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'
    }
  );
};

<h3>Hello {{ author }}</h3>

<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.

<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.

文件

about.hjs

是：

/*
 * 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'
    }
  );
};

<h3>Hello {{ author }}</h3>

<h1>Title: {{ title }} </h1>
{{> part }}
Welcome to Gotham City.

<h1>Title: {{ title }}</h1>
{{> part }}
I'm not Joker.

Title:{{Title}
{{>部分}
我不是开玩笑的。

我有两个问题：

我怎样才能正确地使用我的页面中的partials？（此代码不起作用）

我是否可以对两个或多个页面使用相同的“标题”，而不重复文件

/routes/index.js

中的值赋值

向你问好，Vi.

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

你最好的选择是：

npm安装整合

这些修补程序采用不同的方法为Hogan添加分部：

不幸的是，这个引擎没有一个钩子来钩住本机的基于文件系统的部分，所以我认为人们对如何以及在哪里实现部分感到困惑。我最终得到了LinkedIn的Dust.js实现，因为部分支持已经存在。Master实际上有更好的支持，加上我昨天提交了一个相对路径的补丁

Josh

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

首先，我删除了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.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'));
});

/**
 * 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'));
});

exports.index = function(req, res) {
  res.locals = {
    title: 'Title',
  };
  return res.render(
    'index',
    {
      partials:
      {
        part: 'part',
      }
    }
  );
};

和routes/index.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'));
});

/**
 * 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'));
});

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>

{{> part}}
Hello world!

所以，它工作得很好。
我会使用mmm
而不是hjs


免责声明：我写的包
只需将所有出现的hjs
替换为mmm
，部分将开始工作。在上面的链接中有更多的信息和示例
至于你的另一个问题，如果你想在多个视图中共享属性，你有两个选择
调用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引擎
但是，对于mmm
，请参见演示逻辑下的部分，了解将值绑定到模板或模板集的更多方法。
至于您的部分问题，如果您使用，您只需执行以下操作：
res.render('index', {
  partials: {
    part  : 'path/to/part'
  }
});

要在express+hogan中使用partials，只需执行以下操作：
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>

什么
{{{partialHTML}}}
呜呜呜呜

注意三元组“{”而不是通常使用的双元组！这告诉hogan（mustache）将其解析为HTML而不是字符串
就是这样。
至少在Express 4+中，partials是现成的。您可以使用带有--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>


{{>头}
{{title}}
欢迎来到{{title}

注意：这在视图中有header.hjs
非常感谢。我可以使用hogan express软件包找到一个部分解决方案。与consolidate有区别？哪一个更好？consolidate可能实际支持部分。在下面列出的解决方案中，您必须转发声明所有部分，并在选项哈希中传递它们。这有点不方便，但并非不可行。在其他语言中，你可以只说{>partial/}它将直接从文件系统中提取部分。我遇到了类似的问题，我不想遵循下一个解决方案，显式地将部分变量传递给我的模板。我现在要尝试mmm。希望这能起作用。我已经尝试过hulk hogan，但却发现它与express 3.xBad建议不兼容。如果OP有一个使用hjs已经完成了n项工作。更改模板引擎来解决这样一个简单的问题真是太麻烦了。谢谢你发布这个问题。嘘。谷歌搜索了一段时间，直到我偶然发现了这个宝石。我认为Oren的答案是这个问题的正确答案。你在这里运行的是哪个版本的express？什么是部分？无需删除hjs
现在，只需在render
@user1775888中添加partials:{var:file_path}
是正确的…至少对于express4+。我在另一个回答中对此进行了扩展。您知道如何为Javascript变量赋值吗？类似于：var html={{{partialHTML}}“；但具有html转义字符等的安全性…”？？？？