How to enable data binding in KnockoutJS using the

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

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

Answer 2

The easiest way in MVC3 is to do:

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