Teilweise mit Node.js + Express + Hogan.js

Question

Ich entwickle eine Site mit Node.js + Express und verwende als View Engine Hogan.js.

Dies ist meine Datei 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'));
});

Die Datei /routes/index.js lautet:

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

Im Ordner /views befinden sich:

| - part.hjs

| - index.hjs

| - cv.hjs

Die Datei part.hjs lautet:

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

Die Datei index.hjs lautet:

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

Und die Datei about.hjs lautet:

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

Ich habe zwei Fragen:

Wie kann ich die Partials auf meinen Seiten richtig verwenden? (Dieser Code funktioniert nicht)
Kann ich denselben "Titel" für zwei oder mehr Seiten verwenden, ohne die Wertezuweisung in Datei /routes/index.js zu wiederholen?

Viele Grüße, Vi.

javascript node.js express viewengine hogan.js

18

user1288707 8 Okt. 2012 im 18:18

Answer 1

Ich habe eine Lösung für die erste Frage gefunden.

Zuerst habe ich hjs entfernt:

npm remove hjs

Dann habe ich das Paket hogan-express installiert:

npm install hogan-express

Außerdem habe ich app.js bearbeitet:

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

Und routes/index.js:

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

Nun gibt es in /views index.html, part.html. Die Datei part.html enthält:

<h1>{{ title }}</h1>

Die Datei index.html enthält:

{{> part}}
Hello world!

Also, es funktioniert gut.

25

8 Okt. 2012 im 20:08

Answer 2

Wenn Sie consoleate.js verwenden, können Sie einfach Folgendes tun:

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

3

Nathan Walker 25 Mai 2014 im 13:35

Answer 3

Ich würde mmm anstelle von hjs verwenden.

https://github.com/techhead/mmm

Haftungsausschluss: Ich habe das Paket geschrieben.

Ersetzen Sie einfach alle Vorkommen von hjs durch mmm und Partials beginnen zu funktionieren. Es gibt viel mehr Informationen und ein Beispiel unter dem obigen Link.

Bei Ihrer anderen Frage haben Sie mehrere Optionen, wenn Sie Eigenschaften für mehrere Ansichten freigeben möchten.

Wenn Sie res.render(name, options) aufrufen, wird das options tatsächlich auf res.locals und app.locals zusammengeführt, bevor es an die Rendering-Engine übergeben wird. Um eine app-weite Eigenschaft festzulegen, können Sie sie daher einfach app.locals zuweisen.

app.locals.title = "Default Title"; // Sets the default title for the application

Dieses Konzept gilt wirklich für nahezu jede Express 3 View Engine.

Für mmm finden Sie jedoch im Abschnitt unter Präsentationslogik weitere Möglichkeiten zum Binden von Werten an eine Vorlage oder einen Satz von Vorlagen.

2

Jonathan Hawkes 13 Okt. 2012 im 20:13

Answer 4

Das ist ein Problem. Teilweise Unterstützung ist in Express 3 schwer zu bekommen.

Ihre beste Wette ist: https://github.com/visionmedia/consolidate.js npm install consolidate

Diese Patches verfolgen unterschiedliche Ansätze zum Hinzufügen von Partials für Hogan:

Leider hat die Engine nativ keinen Hook für Dateisystem-basierte Partials, daher denke ich, dass die Leute verwirrt sind, wie und wo Partials implementiert werden sollten. Am Ende hatte ich die Implementierung von LinkedIn Dust.js, da bereits teilweise Unterstützung vorhanden war. Der Master hat sogar noch bessere Unterstützung, und ich habe gestern einen Patch für relative Pfade eingereicht.

Josh

2

Josh 8 Okt. 2012 im 14:53

Answer 5

Zumindest in Express 4+ funktionieren Partials sofort. Sie können den Express-Generator (ab npm) mit der Option --hogan oder -H verwenden.

Danach müssen Sie der Rendermethode Partials hinzufügen:

router.get('/', function(req, res, next) {
  res.render('index', 
        { 
            title: 'My Site',
            partials: {header: 'header'} 
        });
});

Verwenden Sie dann in Ihrer Vorlage {{> xxx}}

<body>
  {{> header }}
  <h1>{{ title }}</h1>

  <p>Welcome to {{ title }}</p>
</body>

HINWEIS: Dies hat header.hjs in Ansichten

6

bryanmac 10 Sept. 2015 im 01:40

Answer 6

Gehen Sie wie folgt vor, um Partials mit Express + Hogan zu verwenden:

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

Und jetzt yourMainView.html:

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

Beachten Sie das dreifache '{' anstelle des doppelten, wie Sie es normalerweise tun! Das sagt Hogan (Schnurrbart), dies als HTML und nicht als String zu analysieren!

Das ist es.

4

Oren Yakobi 19 Juni 2014 im 08:48

Teilweise mit Node.js + Express + Hogan.js

6 Antworten

Verwandte Fragen

Neue Fragen