web-dev-qa-db-ja.com

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.

私は2つの質問があります：

  1. ページでパーシャルを適切に使用するにはどうすればよいですか？ （このコードは機能しません）
  2. ファイル/routes/index.jsで値の割り当てを繰り返さずに、2つ以上のページに同じ「タイトル」を使用できますか？

よろしく、Vi。

javascriptnode.jsexpressviewenginehogan.js
18
user1288707

最初の質問の解決策を見つけました。

まず、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!

だから、それはうまくいきます。

25
user1288707

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>

通常のようにダブルではなくトリプル「{」に注意してください。これを文字列ではなくHTMLとして解析するようにhogan（口ひげ）に指示します！

それでおしまい。

4
Oren Yakobi

パーシャルの質問については、 consolidate.js を使用すると、次のように簡単に実行できます。

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

mmmの代わりにhjsを使用します。

https://github.com/techhead/mmm

免責事項：私はパッケージを書きました。

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 ViewEngineに実際に適用されます。

ただし、特にmmmについては、値をテンプレートまたはテンプレートのセットにバインドするその他の方法について、プレゼンテーションロジックのセクションを参照してください。

2
Jonathan Hawkes

これは問題です。 Express 3では、部分的なサポートを利用することは困難です。

最善の策は次のとおりです。 https://github.com/visionmedia/consolidate.jsnpm install consolidate

これらのパッチは、ホーガンのパーシャルを追加するためにさまざまなアプローチを取ります。

残念ながら、エンジンにはファイルシステムベースのパーシャルのフックがネイティブにないため、パーシャルを実装する方法と場所について人々は混乱していると思います。部分的なサポートがすでに存在していたため、LinkedInのDust.js実装に行き着きました。マスターは実際にはさらに優れたサポートを提供しています。さらに、昨日、相対パスのパッチを送信しました。

ジョシュ

2
Josh