The Model-View-ViewModel (MVVM) pattern is used to provide a clean separation of concerns between the user interface controls and their underlying logic. The MVVM pattern consists of three core components: the model, the view and the view model, each of which serves its own distinct and separate role, shown in the diagram below.

The model is a representation of the application’s domain model. Models hold information but do not handle behavior or influence how the information appears to the end user which is the responsibility of the view.

The view controls the structure, layout and appearance of what the end user sees. The view is responsible for representing the state of the view model. In the case of Commerce Store Accelerator, the view is constructed from HTML documents that contain declarative bindings that link it to the view model.

The view model acts as the intermediary between the view and the model and is responsible for handling the view logic. The view model retrieves data from the model and makes it available to the view through data bindings. As part of this process, the view model may reformat the data in such a way that it is easier for the view to work with it. The view model is also responsible for passing commands from the view to the model, essentially acting as a middle man between the two.