"Model" and "ViewModel" in Knockout.js

Question

In MVC, the “ Model ” is simply a representation of the data code (for example, in ASP.NET MVC it ​​is a class with corresponding fields).

However, in Knockout (which uses MVVM), I see that the object with the fields is called "ViewModel". From the official documentation of KO:

Model: Your applications store data. This data represents objects and transactions in your business domain (for example, bank accounts that can make money transfers) and does not depend on any user interface. When using KO, you usually make Ajax calls to some server code for reading and write the data of the saved model.

Presentation model: pure presentation of data and operations on a clean code user interface. For example, if you use a list editor, your view model will be an object containing a list of elements, and expansion methods to add and remove elements.

As you can see from the examples, ViewModels are field objects containing data, which was usually done using Model in MVC:

var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; 

So, I'm a little lost here. What does “Model” and “ViewModel” mean in the Knockout.js domain?

Answer 1

In the MVVM template implemented by JavaScript, often the "Model" part is provided by the web api. The data that is provided on the page is a model. Now, whether this data is in a separate model object as soon as it is in JavaScript is a different story.

Often a view model is simply a model complemented by properties and functions to support the particular view to which it is applied. Client-side calculations, outlier control values, client-side verification procedures, etc. In this case, the view model may look like this:

 var vm = { save: function(){ save logic... }, cancel: function(){ cancel logic... }, states: ko.observable(), //list of states for state dropdown customerId: ko.observable(), customerFirstName: ko.observable(), customerLastName: ko.observable() }; 

In other cases, the model will be stored in a separate object . In this case, the view model might look like this:

 var customerModel = getCustomerFromDataSource(); var vm = { save: function(){ save logic... }, cancel: function(){ cancel logic... }, states: ko.observable(), //list of states for state dropdown customer: customerModel }; 

The main thing to keep in mind is that the model is data, and the View model is the layer that makes your model viewable (usually using data binding). Sometimes a Model can be a separate class; in other cases, the model is only a known set of properties in the view model.

Answer 2

Model
Models contain information but usually do not handle behavior

View
A view contains data bindings, events, and behavior that require an understanding of the Model and ViewModel. Although these behaviors can be mapped to properties, the View is still responsible for handling events in the ViewModel

ViewModel
ViewModel is located behind the user interface layer. It provides the data necessary for viewing (from the model), and can be considered as the source to which our views go for both data and actions.

You can find more information in the following link here
You can also find more information about mvc and mvvm at fooobar.com/questions/11061 / ...

Answer 3

Well, that said my professor (also a JavaScript programmer).

A model is an object that contains data as one of its properties.

whereas ViewModel is just an interface / layer that separates data and DOM (document object model).

In the case of Model, the data tries to connect to the user interface each time the document object model is called.

ViewModel is used to stop this practice. Once the data in the model is completely ready, they are assigned to the array present in the viewModel. Then, from the view model, it is displayed in the user interface.

This is just a good way to program.