'Model' and 'ViewModel' in Knockout.js

Question

In MVC, 'Model' is just code representation of data (e.g. in ASP.NET MVC it's a class with according fields).

In Knockout however (which employs MVVM), I see that object with fields is called a 'ViewModel'. From official KO documentation:

A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.

A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.

From examples, it can be seen that ViewModels are objects with fields, holding the data, what usually'd be done by Model in MVC:

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

So I'm a little lost here. What exactly 'Model' and 'ViewModel' mean in Knockout.js domain?

Answer 1

In a JavaScript-implemented MVVM pattern, often the "Model" part is supplied by the web api. The data that is provided to the page is the model. Now whether that data is contained in an separate model object once it's in JavaScript - that's another story.

Often a View Model is just a Model that has been augmented with properties and functions to support the particular view that it is applied to. Client-side calculations, drop-down look-up values, client-side validation routines, etc. In this case, the view model might 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()
};

Other times, the model will be maintained in a separate object. In that 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 the data and the View Model is the layer that makes your Model available to the view (usually via data-binding). Sometimes the Model may be a separate class; other times the Model is just a known set of properties in the View Model.