First, we will create a module for the entire sidebar. This module will be responsible for calling multiple other modules to populate ViewModel for each section of the sidebar. As we will be populating each page's own ViewModel with data specifically for the sidebar, the sidebar module's function will accept that original ViewModel as a parameter. This is so that we can append data to the existing ViewModel for each page.

Here, we will be appending a sidebar property (which is a JavaScript object) that contains properties for each of the sections of the sidebar.

To get started, first create a file named helpers/sidebar.js, and insert the following code:

const Stats = require('./stats'),
    Images = require('./images'),
    Comments = require('./comments');
module.exports = (ViewModel, callback) => {
    ViewModel.sidebar = {
        stats: Stats(),
        popular: Images.popular(),
        comments: Comments.newest()
    };
    callback(ViewModel);
};

In the preceding code, you can see that you first required a module for each section of the sidebar. The existing ViewModel for any given page that displays the sidebar is the first parameter of the function. We added a sidebar property to ViewModel and set values for each property by calling the module for each section of the sidebar. Finally, we executed a callback that was passed in as the second parameter to the sidebar module. This callback is an anonymous function that we will use to execute the rendering of the HTML page.

Let's update the home and image controllers to include a call to the sidebar module, as well as to defer rendering the HTML template for each page to the callback for the sidebar module.

Edit controllers/home.js and consider the following line of code:

res.render('index', ViewModel);

Replace it with this new block of code:

sidebar(ViewModel, (ViewModel) => {
    res.render('index', ViewModel);
});

Make the exact same changes to the controllers/image.js file, replacing index with image:

sidebar(ViewModel, (ViewModel) => {
    res.render('image', ViewModel);
});

Again, note how we executed the sidebar module and passed the existing ViewModel as the first parameter and a basic anonymous function as a callback for the second parameter. What we did was wait to render the HTML for the View until after the sidebar completed populating ViewModel. This is because of the asynchronous nature of Node.js. Suppose that we wrote the code in the following way instead:

sidebar(ViewModel);
res.render('index', ViewModel);

Here, it's quite likely that the res.render statement will execute before sidebar has even finished doing any work. This will become very important once we introduce MongoDB in the next chapter. Additionally, as we are now using the sidebar module in each controller, ensure that you require it at the top of both controllers by including the following code:

const sidebar = require('../helpers/sidebar');

Now that our sidebar module is complete, and it's being called from both controllers, let's complete the sidebar by creating each of the submodules that are required.