Model–view–viewmodel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform.
The “view model” of MVVM is a value converter that means that it is view model’s responsibility for exposing the data objects from the Model in such a way that objects are easily managed and presented.
Here, is a pattern for MVVM:
One of the key reasons the MVVM architecture is so useful is because it offers two-way data binding between view and view-model. It also helps you to automate the propagation of modifications inside View-Model to the view. The view-model makes use of observer pattern to make changes in the view-model.
Let’s see each component of MVVM in detail:
The model stores data and related logic. It represents data that is being transferred between controller components or any other related business logic.
For example, a Controller object will retrieve the student info from a school database. It manipulates data and sends it back to the database or use it to render the same data.
The View stands for UI components like HTML, CSS, jQuery, etc. In MVVM the view is held responsible for displaying the data which is received from the Controller as an outcome.
The view model is responsible for presenting of functions, commands and methods to support the state of the View. It is also accountable for operating the model and activating the events in the View.
Here, are pros/benefits of MVVM
These are cons/drawback of employing MVVM in your application: