Given a single HTML view in our app, we need to be able to attach data to that page so that the template that is being rendered can be included in such a way that the dynamic areas of the page are replaced with real content. To do this, we need to generate a view model. During the render, the template engine will parse the template itself and look for special syntax that indicates that specific sections should be replaced at runtime with values from the view model itself. Think of this as a fancy runtime find and replace of your HTML templates—finding variables and replacing them with values stored in the view model sent to the template.

A view model, in the sense of how we are using one, is typically just a single JavaScript object (or collection of objects in an array) that can be passed to the template-rendering engine that contains all of the necessary data we need to properly render the page. The view model for a page will typically contain all of the data necessary to render the content-specific portions of that page. Using our application as an example, the view model for a specific image's page may contain the title of the image, its description, and the information necessary to display the image and various stats such as the number of likes, views, and a collection of comments. A view model can be as simple or as complex as you like.