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

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));