¿Cómo habilitar el enlace de datos en KnockoutJS usando el Motor de visualización "Razor" ASP.NET MVC 3?

Question

Estoy tratando de implementar this Knockout example usando el motor de vista "Razor" de ASP MVC 3.

El primer tema trata los datos simples de unión de una matriz de C# utilizando la vista motor estándar ASP. Estoy tratando el ejemplo muestra el uso de "Razor", y esta línea:

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

resultado en una variable de vacío para initialdata.

También probé esto:

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

Y luego se especifica el initialdata así:

var initialData = @Html.Raw(data); 

Este puebla initialdata con el conjunto de datos, pero la unión no funciona.

sólo estoy tratando de DataBind este conjunto con el fin de mostrar un recuento de las ideas, como en el ejemplo:

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

¿Por qué no se de datos de trabajo obligatorio en este caso?

Answer 1

La manera más fácil de hacer es MVC3:

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

Answer 2

me encontré con este mismo problema, y ​​descubrí que era mi propia estupidez que causó el problema (que tan a menudo es). Se me olvidó que esperar hasta que el DOM cargado llamar ko.applyBindings(viewModel) - por lo que el simple uso:

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

Así que todo el guión como

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

Este trabajó con knockout-1.2.1.js y jquery-1.5. 1.js