Given that there is a single HTML View in our app, we will need 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 the real content. To do this, we will need to generate a View model. During the rendering, the template engine will parse the template itself and look for a special syntax that indicates that specific sections should be replaced with values from the View model itself at runtime. We saw examples of this when we explored the Handlebars template framework in the preceding chapter. 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 is typically just a single JavaScript object that can be passed to the template. The template contains all of the necessary logic we will need to properly render the page. It is the task of the templating engine to produce the corresponding HTML by processing the templates with the associated models. 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 might contain the title of the image, its description, the information necessary to display the image, and various stats, such as number of likes, Views, and a collection of comments. A View model can be as simple or as complex as you like.

The term View model is used here to refer to the data form of the model, which will be tied to the template while rendering the HTML via any templating framework.