如何使用ASP.NET MVC 3"Razor"View Engine在KnockoutJS中启用数据绑定？

Question

我正在尝试使用ASP MVC 3的"Razor"视图引擎来实现这个Knockout示例.

第一个主题涉及使用标准ASP视图引擎对C#数组进行简单数据绑定.我正在尝试使用"Razor"的示例,并且这一行:

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

导致initialData的空变量.

我也试过这个:

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

然后像这样指定initialData:

var initialData = @Html.Raw(data);

这会使用数据集填充initialData,但绑定不起作用.

我只是想尝试数据绑定这个集合以显示想法的计数,如示例中所示:

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

为什么数据绑定在这个实例中不起作用？

Answer 1

MVC3中最简单的方法是:

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

Answer 2

我遇到了同样的问题,并发现这是我自己的愚蠢导致了这个问题(它经常是这样).我忘了等到DOM加载调用ko.applyBindings(viewModel)- 所以只需使用:

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

所以整个脚本为

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

这适用于knockout-1.2.1.js和jquery-1.5.1.js