Question

I have been working through the tutorial by Alex Young on using flash messages. According to this tutorial, one is able to override the default flash messages formatting using dynamicHelpers. Unfortunately there are no details provided on what is going on, and it is not possible to post any comments on the tutorial page to ask relevant questions.

What I fail to see is the relationship between the call to req.flash() in the file ‘app.js’, and the FlashMessage object exported in file ‘helpers.js’. Why would a regular call to req.flash(), which is a standard function in express.js, link to this FlashMessage prototype in the first place? I can’t see how this is happening when I look at the code.

At first I thought the FlashMessage object might have been provided to req.flash() by express.js, in which case we are just extending or overriding it in our helper file. The problem with this is that I cannot find any reference to FlashMessage in the source code of express.js.

I would be really grateful if someone could explain it to me.

The flash message is set in file ‘apps.js’ by calling:

req.flash('info', 'Document created.'); 

The FlashMessage obect is exported ‘helpers.js’:

FlashMessage.prototype = {
  // Get css definition string for icon.
  get icon() {
    switch (this.type) {
      case 'info':
        return 'ui-icon-info';
      case 'error':
        return 'ui-icon-alert';
    }
  },

  // Get css class for message container.
  get stateClass() {
    switch (this.type) {
      case 'info':
        return 'ui-state-highlight';
      case 'error':
        return 'ui-state-error';
    }
  },

  // Returns HTML formatted message.
  toHTML: function() {
    return '<div class="ui-widget flash">' +
           '<div class="' + this.stateClass + ' ui-corner-all">' +
           '<p><span class="ui-icon ' + this.icon + '"></span>' + this.messages.join(', ') + '</p>' +
           '</div>' +
           '</div>';
  }
};

exports.dynamicHelpers = {
  flashMessages: function(req, res) {
    var html = '';
    ['error', 'info'].forEach(function(type) {
      var messages = req.flash(type);
      if (messages.length > 0) {
        html += new FlashMessage(type, messages).toHTML();
      }
    });
    return html;
  }
};

In app.js file the full routing function which calls req.flash is as follows:

// Attach dynamicHelpers to app.
app.dynamicHelpers(require('./helpers.js').dynamicHelpers);

// Routing function which calls req.flash.
app.post('/documents', loadUser, function(req, res) {
  // Create Document object and assign value.
  console.log('Document content: %s', req.body['document']);
  var document = new Document(req.body['document']);
  document.save(function() {
      // Redirect to another page.
      req.flash('info', 'Document created.');
      res.redirect('/documents');
    }
  });
});

Answer 1

There are 2 different things here:

a) req.flash() which is implemented by Express itself – not by you, you’re just using that function
b) your dynamic helper:

From the Express guide:

Dynamic view helpers are simply functions which accept req, res, and
are evaluated against the Server instance before a view is rendered.
The return value of this function becomes the local variable it is
associated with.

app.dynamicHelpers({
  session: function(req, res){
    return req.session;
  }
});

Let’s “translate” that into your code:

// Attach dynamicHelpers to app.
app.dynamicHelpers(require('./helpers.js').dynamicHelpers);

That means that when you call the variable flashMessages in your view code, you’ll get the html representation of those flash variables defined.

So the most important thing here is to consider you are only using req.flash(), not implementing it. You are implementing a helper that is using that function.