javascript - 将 express-flash 与 Handlebars 一起使用？

Question

我正在学习使用 ejs5 的教程。该教程要我使用 express-flash，并像这样组织我的 routes/users 页面。

router.get('/signup', function(req, res, next){
    res.render('accounts/signup', {
        errors: req.flash('errors')
    });
});

随后的 es5 是这样的:

<% if (errors.length > 0) { %>
<%= errors %>
<% } %>

对于我自己，我正在使用 Express-Handlebars。现在，我知道我的 app.js 文件拥有它需要的一切，因为我到 /signup 的路由是这样工作的:

router.get('/signup', function(req, res, next){
    res.render('accounts/signup');     
 });

但是，如果我重新格式化我的路由器代码，如第一个示例所示，我会在我的 signup 路由上收到 404 错误。我不明白这是为什么。为了演示，这就是我所拥有的，与第一个示例相同。

//render the signup//
router.get('/signup', function(req, res, next){
    res.render('accounts/signup', {
        errors: req.flash('errors')
    });
});  

可以肯定的是，我的主要 app.js 文件包含以下内容:

var flash = require('express-flash');
app.use(flash());

除此之外，我还不确定如何使用 Handlebars 复制 ejs 脚本。做这样的事情行得通吗？

{{#if errors.length > 0}}
     {{errors}}
{{/if}}

我无法对此进行测试，因为我首先需要显示我的注册路线。

Answer 1

您可以注册一个 Flash 助手并在主模板中使用它。

// set context for the req, res
app.use(require('./../web/helpers/view').setContext);

exphbs.create({
    extname      :'hbs',
    layoutsDir   : '/path/',
    defaultLayout: 'main',
    helpers      : require('/path/to/view').helpers, // this is where you can register a helper.
    partialsDir  : [
        '/path/'
    ]
});

在 view.js 中，编写一个从 flash 消息构建 html 的方法。

'use strict';

const _ = require('lodash');

let  _req, _res;

// build html for flash messages. 
function renderFlashMsg() {
    let flash = _req.flash(),
        out   = '',
        types = ['success', 'error', 'info'];

    _.each(types, (type) => {
        if (flash[type]) {
            out += '<div class="flash-msgs '+ type +'">';
            out += '<h2><span>' + type + '</span></h2>';
            out += '<ul>';

            _.each(flash[type], (msg) => {
                out += `<li>${msg}</li>`;
            }) ;

            out += '</ul></div>';
        }
    });

    return out;
}

module.exports = {
    'setContext': (req, res, next) => {
        _req = req;
        _res = res;
        next();
    },
    'helpers': {
        renderFlashMsg
    }
};

现在您可以在main 布局文件中使用renderFlashMsg。

将 {{{renderFlashMsg}}} 放在您希望在 DOM 中放置即显消息的位置。