8

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?

Arnthor
  • 2,353
  • 5
  • 31
  • 53
  • By the way, MVC is an architectural pattern, not a design pattern. –  Dec 16 '13 at 15:46
  • 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. – Arnthor Dec 17 '13 at 10:40

3 Answers3

17

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.

Joseph Gabriel
  • 7,785
  • 3
  • 35
  • 52
  • 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. – Adam Zerner Jul 14 '17 at 18:41
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

Community
  • 1
  • 1
Goddard
  • 795
  • 3
  • 11
  • 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. – Arnthor Dec 16 '13 at 12:07
  • 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. – Goddard Dec 17 '13 at 02:28
  • 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. – Arnthor Dec 17 '13 at 07:49
0

Well this was told by my Professor (also a JavaScript programmer).

Model is an object which holds data as one of its property.

whereas ViewModel is just an interface/layer separating the data and the DOM (Document object model).

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

ViewModel is used to stop that practice. Once the data in the model is completely ready, it's been assigned to an array present in the viewModel. Then from the view model it is displayed into the User interface.

It's just a good way of programming.

Shakthi Vel
  • 1
  • 3