Частицы с Node.js + Express + Hogan.js

Question

Я разрабатываю сайт с 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. 

Я два вопроса:

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

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

Answer 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! 

Таким образом, он отлично работает.

Answer 2

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

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

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

• https://github.com/visionmedia/consolidate.js/pull/51
• https://github.com/visionmedia/consolidate.js/pull/29

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

Josh

Answer 3

Я бы использовал 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 View Engine.

Тем не менее, в частности, в разделе «Представление логики» можно найти дополнительные способы привязки значений к шаблону или набору шаблонов.

Answer 4

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

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

Answer 5

Чтобы использовать парциальные с курьерским + 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, а не строку!

Все.

Answer 6

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

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

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

Затем в вашем использовании шаблона {{> ххх}}

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

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

Примечание: это имеет заголовок. hjs in views