'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?

Quaint

By the way, MVC is an architectural pattern, not a design pattern. – Dodecasyllable

Ok, seems you are right, so I changed the tag (it's right either way, as architectural pattern is more generic term). Nevertheless, it's way less popular tag. – Quaint

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.

Washer

This makes sense, but seems inconsistent with, say, Rails, where the Model is an ORM, and the actual data is in the database. The way Knockout defines "Model" seems to be what Rails would call the database, and Knockout doesn't have a built in way to query for your data. – Jaclynjaco

Answer 2

Model
Models hold information, but typically don’t handle behaviour

View
View contains the data-bindings, events and behaviours which require an understanding of the Model and ViewModel. Although these behaviours can be mapped to properties, the View is still responsible for handling events to the ViewModel

ViewModel
ViewModel sits behind our UI layer. It exposes data needed by a View (from a Model) and can be viewed as the source our Views go to for both data and actions.

You can find out more information in the following link here
You can also find more information about mvc and mvvm in stackoverflow question

Packsaddle

Ok, so it seems like the most confusing part is that in most cases no model is exhibited at all. Seems like in KO the actual model is data itself in JSON or whatever format travelling to and from server. This is the only explanation I can think of. If I'm wrong, please tell me why var aViewModel = { contactName: ko.observable('John'); }; is a ViewModel and var Todo = function (content, done) { this.content = ko.observable(content); this.done = ko.observable(done); this.editing = ko.observable(false); }; is a Model? There is no difference between them. – Quaint

Most of the time Model come from web api and we just use in our ViewModel directly. and other way function ProductViewModel() { var self = this; self.Id = ko.observable(""); self.Name = ko.observable(""); self.Category = ko.observable(""); self.Price = ko.observable(""); var Product = { Id:self.Id, Name: self.Name, Category: self.Category, Price:self.Price }; }; we put separate model for MVVM. – Packsaddle

Thank you for the explanation, as the jsfiddle you linked clarifies this rather well. But unfortunately I can only upvote your answer, but not accept it, as Joseph explained the hard part (where the Model is hidden) some hours earlier. – Quaint