Defining models on server side when using MVVM with Knockout.js

Question

I am planning to use knockout.js and MVVM pattern on the client side for a Single Page application. So Models, ViewModels would be defined on the client side. I am confused about how we have to structure on the server side.

1. Now, would controllers just return domain model itself ? Would all the mapping from domain model to ViewModel happen only on the client side ?

2. In my solution, there is wide gap between the Domain model and the ViewModel. So the above approach would result in a lot of data being returned to client side unnecessarily. Though it seems like overkill, I am thinking about repeating ViewModel and InputViewModel definitions (former represents data rendered, latter represents data to be posted back to controller actions) on server side and also having a mapping layer (based on automapper) to map Domain models to ViewModels on the server side. Does this make sense ? Or is there a better approach ?

Pikestaff

Answer 1

I would suggest that you work out what data your view models actually need, then have the controllers build up a server-side view model that contains that data and send it to the client in a JSON format.

This way you are not sending unnecessary data over to the client (or back), you are still able to do much of the heavy lifting on the server and the knockout view models can do what they are meant for: presenting the data to be used by the view.

Emmalynn

You have described the point 2 as I have described in the question. My concern with the point 2 approach is that client recieves json in vm format and again maps to the vm defined on the client side javascript. This is what I mentioned as overkill. Is there a better way to avoid mapping and object creation on the client side ? – Pikestaff

The knockout Mapping plugin (knockoutjs.com/documentation/plugins-mapping.html) will automatically generate the view models on the client side bassed on the JSON data – Emmalynn

Answer 2

What you described in point 2 is actually the solution I use the most and it makes sense to me: I use Automapper on the server side to map between Domain models and ViewModels (.Net objects) that are View specific and contain only the data the View needs. The Controller Action that is responsible for loading the View the first time, will databind the View to the ViewModel, so that the page is initialized quickly without the need to make an Ajax call. In the View itself I create the knockout viewmodel, assigning any initial values (if needed) by Json encoding the bounded ViewModel (for example using Asp.Net MVC i would do something like

var boundedViewModel = @Html.Raw(Json.Encode(Model));

Decomposer

Answer 3

That is exactly how I would approach this problem. If this were a straight MVC app, you would still be creating viewmodels.

Sometimes for complicated data sets, I can see a use case for using something like Knockback, which takes the rich data model of backbone.js and combines it with knockout.js http://kmalakoff.github.com/knockback/

Autocatalysis