If you recall from the Updating the home controller section of Chapter 6, Controllers and View Models, we originally created viewModel, which consisted of an array of JavaScript objects that were just placeholder fixture data in our home controller:

var viewModel = { 
images: [ 
        { 
uniqueId:       1, 
title:          'Sample Image 1', 
description:    '', 
filename:       'sample1.jpg', 
views:          0, 
likes:          0, 
timestamp:      Date.now() 
        }, { 
uniqueId:       2, 
title:          'Sample Image 2', 
description:    '', 
filename:       'sample2.jpg', 
views:          0, 
likes:          0, 
timestamp:      Date.now() 
        }, { 
uniqueId:       3, 
title:          'Sample Image 3', 
description:    '', 
filename:       'sample3.jpg', 
views:          0, 
likes:          0, 
timestamp:      Date.now() 
        }, { 
uniqueId:       4, 
title:          'Sample Image 4', 
description:    '', 
filename:       'sample4.jpg', 
views:          0, 
likes:          0, 
timestamp:      Date.now() 
        } 
    ] 
}; 

We are going to replace that viewModel with a very stripped-down version that we will then populate with real data from our Mongoose models:

var viewModel = {
    images: []
}; 

Before we can populate that viewModel with real data, we need to first make sure our home controller can use our models. To do so, we must require the models module. Include this at the very top of the controllers/home.js file:

const sidebar = require('../helpers/sidebar'), 
ImageModel = require('../models').Image;

We could have required the full models module and had access to both the Comment model and the Image model; however, for the home page, we really only need to use the Image model. Now, our mongoose model for Image is available to our home controller, and we can perform a find operation to retrieve a list of the newest images to display on the home page. Replace the existing sidebar() call in your home controller with this updated version of the code:

ImageModel.find({}, {}, { sort: { timestamp: -1 } },
    (err, images) => {
        if (err) { throw err; }

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

Using ImageModel, we execute a MongoDB find query, but we provide no specifics for the actual query (a blank JavaScript object), which means it will return every document. The second parameter is also a blank JavaScript object, which means we aren't specifying how to map the results, so the full schema will be returned. The third parameter is an options object, where we can specify things such as the sort field and order. In this particular query, we are retrieving every single image in the images collection sorted by timestamp in descending order (ascending order would have a value of 1 instead of -1).

The callback function that executes after a successful find query to the MongoDB database server will return both an error object and an images array of matching models; in our case, it is with every image in the database. Using the array that's returned from the query, we simply attach it to our viewModel via its images property. Then, we call our sidebar function exactly as we did previously.

At this point, we are no longer populating viewModel with fixture data, but are instead populating it with exactly what is returned from the database when we perform a basic find query using our Mongoose Image model. The home page for the application is officially data driven. Here is a recap of the entire controllers/home.js file:

const sidebar = require('../helpers/sidebar'), 
    ImageModel = require('../models').Image; 
 
module.exports = { 
    index: (req, res)=>{ 
        var viewModel = { 
            images: [] 
        }; 
 
        ImageModel.find({}, {}, { sort: { timestamp: -1 }}, (err, images)=>{ 
            if (err) { throw err; } 
 
            viewModel.images = images; 
            sidebar(viewModel, (viewModel)=>{ 
                res.render('index', viewModel); 
            }); 
        }); 
 
    } 
}; 

If you were to run the app and open it in a browser, you wouldn't actually see anything on the home page. That's because we haven't actually inserted any data yet. That's coming up next. However, note that the page itself still works and you don't get any errors. This is because MongoDB is simply returning an empty array from the find on ImageModel, which the Handlebars home page template is handling fine because it's performing an each operation against an empty array, so it's displaying zero images on the home page.