Частицы с 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.

У меня есть два вопроса:

Как правильно использовать частичные части на моих страницах? (этот код не работает)
Можно ли использовать один и тот же "заголовок" для двух или более страниц без повторения присвоения значений в файле /routes/index.js?

С уважением, Vi.

Ответы

Ответ 1

Я нашел решение для первого вопроса.

Прежде всего, я удалил 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!

Итак, он отлично работает.

Ответ 2

По крайней мере, в Express 4+ частичные просто работают из коробки. Вы можете использовать экспресс-генератор (от npm) с опцией -hogan или -H.

После этого вам нужно добавить частичные методы рендеринга:

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>

ПРИМЕЧАНИЕ: у этого есть header.hjs в представлениях

Ответ 3

Чтобы использовать частичные выражения с выражением + 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>

Обратите внимание на тройку '{' вместо double, как вы обычно делаете! Это говорит, что хоган (усы) анализирует это как HTML, а не строку!

Что это.

Ответ 4

Что касается вашего вопроса о частицах, если вы используете consolidate.js, вы можете просто сделать:

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

Ответ 5

Это проблема. Частичная поддержка трудно найти в Express 3.

Ваш лучший выбор: https://github.com/visionmedia/consolidate.js npm install consolidate

Эти патчи используют разные подходы к добавлению партитур для Hogan:

К сожалению, у двигателя нет крючка для частичных элементов, основанных на файловой системе, поэтому я думаю, что люди путаются о том, как и где должны выполняться частичные действия. Я закончил реализацию LinkedIn Dust.js, поскольку частичная поддержка уже была там. У мастера действительно есть еще лучшая поддержка, плюс я вчера опубликовал патч для относительных путей.

Джош

Ответ 6

Я использовал бы mmm вместо hjs.

https://github.com/techhead/mmm

Отказ от ответственности: я написал пакет.

Просто замените все вхождения hjs на mmm, и частичные начнут работать. Существует более подробная информация и пример по ссылке выше.

Что касается вашего другого вопроса, если вы хотите делиться свойствами нескольких просмотров, у вас есть несколько вариантов.

Когда вы вызываете res.render(name, options), options фактически будет объединен с res.locals и app.locals перед передачей движку рендеринга. Поэтому, чтобы установить свойство app-wide, вы можете просто назначить его app.locals.

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

Эта концепция действительно применима практически к любому движку Express 3 View.

Однако для mmm в частности, см. раздел "Представление логики" для получения дополнительных способов привязки значений к шаблону или набору шаблонов.