Les partiels avec Node.js + Express + Hogan.js

Je suis le développement d'un site avec Node.js + Express et en utilisant comme moteur d'affichage Hogan.js.

C'est mon fichier 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'));
});

Le fichier /routes/index.js est:

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

Dans /views dossier, il y a:

|- part.hjs

|- index.hjs

|- cv.hjs

Le fichier part.hjs est:

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

Le fichier index.hjs est:

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

Et le fichier about.hjs est:

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

J'ai deux questions:

Comment puis-je utiliser correctement les partiels dans mes pages? (ce code ne fonctionne pas)
Puis-je utiliser le même "titre" de deux pages ou plus, sans répéter les valeurs d'affectation dans le fichier /routes/index.js?

Cordialement, Vi.

Merci de poster cette question. Sheesh. googlé autour pour un peu, jusqu'à ce que je suis tombé sur ce petit bijou.
Je pense Oren réponse est la bonne pour cette question.
La version de express êtes-vous ici?

InformationsquelleAutor | 2012-10-08

J'ai trouvé une solution pour la première question.

Tout d'abord, j'ai enlevé hjs:

npm remove hjs

Puis, j'ai installé le package hogan-express:

npm install hogan-express

En outre, j'ai édité 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'));
});

Et routes/index.js:

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

Maintenant, dans /views il y a index.html, part.html.
Le fichier part.html contient:

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

Le fichier index.html contient:

{{> part}}
Hello world!

Donc, Il fonctionne très bien.

paularmstrong.github.io/rasade
pas besoin de supprimer hjs maintenant, ajoutez simplement partials:{ var: file_path } dans render
est correcte... au moins pour les 4+. J'ai développé ce sujet dans une autre réponse

InformationsquelleAutor

6

Au moins en Express 4+, les partiels simplement travailler hors de la boîte. Vous pouvez utiliser express-générateur (à partir de mnp) avec --hogan ou de l'option-H.

Après avoir fait cela, vous devez ajouter les partiels à la méthode render:
```
router.get('/', function(req, res, next) {
  res.render('index', 
        { 
            title: 'My Site',
            partials: {header: 'header'} 
        });
});
```
Puis, dans votre utilisation du modèle {{ > xxx }}
```
<body>
  {{> header }}
  <h1>{{ title }}</h1>

  <p>Welcome to {{ title }}</p>
</body>
```
REMARQUE: c'est l'en-tête.hjs dans les vues

InformationsquelleAutor bryanmac
4

À utiliser les partiels avec express+hogan, il suffit de faire les opérations suivantes:
```
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);   
       });     
   });
}
```
Et maintenant, yourMainView.html:
```
<p>Something Something Something</p>
{{{partialHTML}}}
<p>Bla Bla Bla</p>
```
Avis de la triple '{' au lieu de double comme vous le faites! Que dire hogan (moustache) pour analyser ce que HTML plutôt que d'un string!

Que c'est.
- Savez-vous comment affecter le à une variable Javascript ? quelque chose comme: <script> var html = '{{{partialHTML}}}'; </script>, Mais avec la sécurité de html échapper les caractères, etc.. ????
InformationsquelleAutor Oren Yakobi
3

Que pour vos partiels question, si vous utilisez consolidate.js vous pouvez tout simplement faire:
```
res.render('index', {
  partials: {
    part  : 'path/to/part'
  }
});
```
InformationsquelleAutor ydaniv
2

C'est un problème. Une prise en charge partielle est difficile à trouver en Express 3.

Votre meilleur pari est de:
https://github.com/visionmedia/consolidate.js
npm install consolidate

Ces patchs prendre différentes approches à l'ajout d'harmoniques pour Hogan:
- https://github.com/visionmedia/consolidate.js/pull/51
- https://github.com/visionmedia/consolidate.js/pull/29
Malheureusement, le moteur n'a pas un crochet pour le système de fichiers basé partiels en natif, je pense que les gens sont confus au sujet de comment et où partiels devraient être mises en œuvre. J'ai fini avec de LinkedIn Dust.js la mise en œuvre, depuis une prise en charge partielle était déjà là. Maître a effectivement encore mieux soutenir, en plus j'ai soumis un patch hier pour les chemins relatifs.

Josh
- Je vous remercie beaucoup. J'ai pu trouver une solution pour les partiels à l'aide de hogan-colis express. Il y a des différences avec les consolider? Qui est le meilleur?
- Consolider peuvent avoir du support pour les partiels. Dans la solution que vous avez énumérés ci-dessous, vous devez déclarer avant tous vos partiels et les passer dans les options de hachage. C'est un peu gênant, mais pas irréalisable. Dans d'autres langues, vous pouvez simplement dire {>partielle/} et il va tirer dans l'partiellement le système de fichiers directement.
InformationsquelleAutor Josh
2

Je voudrais utiliser mmm au lieu de hjs.

https://github.com/techhead/mmm

Avertissement: j'ai écrit le paquet.

Il suffit de remplacer toutes les occurrences de hjs avec mmm et partiels va commencer à travailler. Il y a beaucoup plus d'informations et un exemple sur le lien ci-dessus.

Comme pour votre autre question, si vous voulez les propriétés de partager à travers de multiples points de vue, vous avez quelques options.

Lorsque vous appelez res.render(name, options), le options va effectivement être fusionnées sur res.locals et app.locals avant d'être transmises au moteur de rendu. Donc pour définir une application à l'échelle de la propriété, vous pouvez simplement l'attribuer à app.locals.
```
app.locals.title = "Default Title"; //Sets the default title for the application
```
Ce concept s'applique vraiment à peu près n'importe quel Express 3 Moteur d'Affichage.

Cependant, pour mmm en particulier, veuillez consulter la section en vertu de la Logique de Présentation pour plus de moyens pour lier les valeurs à un modèle ou un ensemble de modèles.
- Je vais avoir des problèmes similaires, et je ne veux pas suivre la solution suivante et de transmettre explicitement une partiels variable de mes modèles. Je vais essayer de mmm maintenant. Espérons que cela fonctionne. J'ai déjà essayé hulk hogan, seulement pour réaliser que ça ne marchait pas avec express 3.x
- Mauvaise suggestion. Que faire si l'OP a une tonne de travail à l'aide de hjs déjà. Le changement d'un moteur de template pour résoudre un tel problème est simple massive overkill
InformationsquelleAutor Jonathan Hawkes

Vous devez vous connecter pour publier un commentaire.