A view model is a data transfer object (DTO) that gathers all data a particular view needs to render. Rather than making a web view obtain each value separately, an API can return one object containing the needed salesperson, monthly-total, and monthly-average data. That can reduce the request to a single API call. section 9.3.3
The name is easily confused with an MVVM ViewModel, but the roles differ. A view model is usually a data-shaped DTO for a view. An MVVM ViewModel is a class representing a View’s state and providing functionality for that View, including presentational logic and responses to user actions. section 9.3.3 section 9.3
Use a view model when a screen needs data drawn from several sources:
- Define DTOs for the distinct data the view needs, such as a salesperson, a monthly total, and a monthly average. section 9.3.3
- Aggregate those DTOs into one view model shaped around rendering the view. section 9.3.3
- Return the aggregated object from the API so the web view can render from one call rather than call for each item individually. section 9.3.3
Sales leaderboard
A sales leaderboard may need an individual salesperson DTO alongside monthly-total and monthly-average DTOs. An API can package these into one view model, allowing the web view to receive the complete leaderboard payload in one request. section 9.3.3
Do not use the DTO meaning to decide where MVVM logic belongs. In MVVM, the View owns layout and UI behavior, the ViewModel owns UI state and presentational logic, and the Model owns business logic. A ViewModel exposes bindable properties and commands, while the View binds controls to them. section 9.3 section 9.3.5
Figure 9.7 In the MVVM pattern, the View only contains UI logic. Controls are bound to properties on a ViewModel, and rather than event handlers, commands are used to trigger actions. The ViewModel maintains the state of the View by exposing properties for the UI to bind to and commands for the UI to call. The Model contains all the business logic, and the ViewModel interacts with the Model. In this example, a CarService from the Model is injected into the ViewModel. A Button in the View is used to trigger a command in the ViewModel. The ViewModel contains a Car object, which has properties bound in the UI. The Add Car Command calls the AddCar method in the injected service and passes in the ViewModel’s Car property as a parameter.
This architecture shows the MVVM meaning of ViewModel: controls bind to its properties and commands, while services and business logic remain in the Model. section 9.3.5
