时间戳

首页 > 解决方案 > 如何从 connect-flash 修复 div，它们始终处于活动状态（我正在使用哈巴狗）？

javascript - 如何从 connect-flash 修复 div，它们始终处于活动状态（我正在使用哈巴狗）？

问题描述

所以我在我的 app.js 中有这个： var flash = require('connect-flash');

app.use(flash());
app.use(function(req , res , next){
  res.locals.success_messages = req.flash('success');
  res.locals.error_messages = req.flash('error');
  next();
});

在我的 layout.pug 中，我有：（就在块内容之前）

if success_messages 
        .alert.alert-success=success_messages
if error_messages
        .alert.alert-danger=error_messages

当我使用它时：

req.flash('error','All fields required!');

和成功。

但是div(class="alert alert-danger")并且div(class="alert alert-success") 总是在我页面的顶部，没有消息，只有 2 个空栏。 分区 怎么了 ？

标签： javascriptnode.jsexpresspugconnect-flash

解决方案

当变量success_messages和error_messages为真时，就会发生这种情况。请注意 MDN 文档中的空数组和空对象仍将在 if 语句中评估为真。

在您的路线中添加这两行，您将准确地看到您传递到模板中的内容。如果看起来像[]，{}那么 pug 中的 if 语句将通过真实测试，并且这些 div 将呈现空白。

console.log( 'success_messages is ' + JSON.stringify(success_messages) );
console.log( 'error_messages is ' + JSON.stringify(error_messages) );

您可以通过在模板中添加长度测试来解决此问题（我假设您从 connect-flash 获取数组）：

if success_messages.length > 0 
  .alert.alert-success=success_messages
if error_messages.length > 0
  .alert.alert-danger=error_messages

这是一个明确的测试，不会退回到有时会产生意想不到的结果的真实性。

推荐阅读