webentwicklung-frage-antwort-db.com.de

Partials mit Node.js + Express + Hogan.js

Ich entwickle eine Site mit Node.js + Express und benutze 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 /views Ordner gibt es:

| - 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:

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

Viele Grüße, Vi.

javascriptnode.jsexpressviewenginehogan.js
18
user1288707

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

Zuerst entfernte ich hjs: 

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

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

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

Die Datei index.html enthält:

{{> part}}
Hello world!

So funktioniert es gut.

25
user1288707

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

Danach müssen Sie der Render-Methode 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

Um Partials mit express + hogan zu verwenden, gehen Sie einfach wie folgt vor:

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 üblich! Dieser sagenhafte Hogan (Schnurrbart), um dies als HTML und nicht als String zu analysieren!

Das ist es.

4
Oren Yakobi

Was Ihre Teilfrage betrifft, können Sie mit consolidate.js einfach Folgendes tun:

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

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 die Teilmerkmale beginnen zu arbeiten. Es gibt viele weitere Informationen und ein Beispiel unter dem Link oben.

Für Ihre andere Frage: Wenn Sie Eigenschaften für mehrere Ansichten freigeben möchten, haben Sie mehrere Optionen.

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

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

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

Speziell für mmm finden Sie im Abschnitt unter Präsentationslogik weitere Möglichkeiten, um Werte an eine Vorlage oder einen Satz von Vorlagen zu binden.

2
Jonathan Hawkes

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

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

Diese Patches verwenden unterschiedliche Methoden, um Partials für Hogan hinzuzufügen:

Leider verfügt die Engine nicht über einen systemeigenen Haken für Dateisystem-basierte Partials, daher denke ich, dass die Leute verwirrt sind, wie und wo Partials implementiert werden sollten. Ich bin mit der Implementierung von LinkedIn Dust.js gelandet, da bereits teilweise Unterstützung vorhanden war. Der Master hat sogar eine noch bessere Unterstützung und ich habe gestern einen Patch für relative Pfade eingereicht.

Josh

2
Josh