How to enable data binding in KnockoutJS using the ASP.NET MVC 3 "Razor" View Engine?

Question

I'm trying to implement this Knockout example using ASP MVC 3's "Razor" view engine.

The first topic covers simple data binding of a C# array using the standard ASP view engine. I am trying the sample example using "Razor", and this line:

<script type="text/javascript"> 
    var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>; 
</script>

results in an empty variable for initialData.

I also tried this:

@{
    string data = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model);
}

And then specified the initialData like this:

var initialData = @Html.Raw(data);

This populates initialData with the dataset, but binding does not work.

I'm just trying to databind this set in order to display a count of the ideas, as in the example:

<p>You have asked for <span data-bind="text: gifts().length">&nbsp;</span> gift(s)</p>

Why isn't data binding working in this instance?

Answer 1

The easiest way in MVC3 is to do:

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

Answer 2

I ran into this same problem, and discovered that it was my own stupidity that caused the issue (which it so often is). I forgot to wait until the DOM loaded to call ko.applyBindings(viewModel) - so simply using:

$(document).ready(function () { ko.applyBindings(viewModel); });

So the whole script as

<script type="text/javascript">
var initialData = @Html.Raw( new JavaScriptSerializer().Serialize(Model));
var viewModel = {
    gifts: ko.observableArray(initialData)
};

$(document).ready(function () { ko.applyBindings(viewModel); });
</script>

This worked with knockout-1.2.1.js and jquery-1.5.1.js