CODEWITHSUNDEEP
asp.net-mvc-3razorknockout.js
jsteve81
jsteve81

Reputation: 735

Knockout JS, MVC 3 and View Model Server Side Data as JSON

So I have a problem...I am separating concerns in my web app: HTML in razor pages and JS in js files. My problem lies in the fact that I want to use data from my controller passed down in the view model from the server as the options of a select list. The problem lies in the fact that I have separated my js from my HTML and I can't access Razor inside the js files.

I have a list of items coming down into my view model...

public List Stuffs { get; set; }

I json encode it server side and make sure to take care of circular refrences, so it looks like this [{"id":1,"name":"blah"},{"id":2,"name":"blah2"},{"id":3,"name":"blah3"},{"id":4,"name":"blah4"}]

The problem is, I want to keep my separation of concerns, so how do I get that array into my js file so I can bind it to a select list using knockout? I definitely don't want to do another round trip to the server.

Upvotes: 0

Views: 1111

Answers (2)

Tom W Hall
Tom W Hall

Reputation: 5283

Does your Javascript file contain a view model in the form of an instantiable function, e.g. something like:

function MasterVM(data)

or an object literal, e.g.

var masterVM = { ...

? I tend to go for instantiable view models (partly because they chain down through a hierarchy of view models using the mapping plugin - the top level one builds its children) and that being the case I think it's nice for the Razor view to instantiate the view model with the JSON rendered from the MVC view model, e.g.:

var masterVM = new MasterVM(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

Or even have the Knockout view model "owned" by a revealing module and initialise it like:

productModule.init(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

Then productModule is also responsible for other things like mediating between your view model(s) and the server, watching for dirty state, etc.

Also, doing another round trip to the server is not necessarily bad if you are sourcing a massive set of reusable options which you'd like the browser to cache. If you are, you might want to have an MVC controller which emits a big object literal containing all of your commonly used options, which you can then use as the "options" property across multiple selects. But if your options are specific to the particular view model, then I guess they have to be part of your view model.

Upvotes: 1

Kyeotic
Kyeotic

Reputation: 19857

So lets say you have some view that looks like this:

<div> (Some stuff) </div>

<script type="text/javascript">
    var initialData = //Your JSON
<script>

And then in your javascript (which you have linked below your view, so that it loads after it), you have something like this:

var data = initialData || {} //Or some other default value, in case initialData wasn't set

This will load in the initialData if it was set, or use nothing (or a default your define) if it wasn't. Loosely coupled.

Of course, more complex data will require you to standardize the strucure, but this is essentially one method that allows you to pull in data from the razor generated View without tightly coupling it to your javascript file.

Upvotes: 2

Related Questions