如何使用 ASP.NET MVC 3“Razor”视图引擎在 KnockoutJS 中启用数据绑定？答案

【问题标题】：How to enable data binding in KnockoutJS using the ASP.NET MVC 3 "Razor" View Engine?如何使用 ASP.NET MVC 3“Razor”视图引擎在 KnockoutJS 中启用数据绑定？
【发布时间】：2023-03-04 13:26:02
【问题描述】：

我正在尝试使用 ASP MVC 3 的“Razor”视图引擎来实现 this Knockout example。

第一个主题涵盖了使用标准 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>

为什么数据绑定在这种情况下不起作用？

【问题讨论】：

标签： asp.net-mvc-3 razor knockout.js

【解决方案1】：

MVC3 中最简单的方法是：

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

【讨论】：

谢谢，@RP，但这对我不起作用。我有这个：
您已要求礼物。
绑定不显示给我。
你能在浏览器中做一个“查看源代码”，看看 initialData 在标记中的样子吗？我有一份适用于此代码的礼物编辑器示例。你改变了什么吗？谢谢。
没什么特别的。 initialData 只是一个填充了正确数据的常规 JSON 数组。我可以抛出一个具有正确计数的警报框，但是 ko 数据绑定不起作用。这非常令人沮丧，因为现场示例非常棒。
您可以看看这个：db.tt/5VYfoWz 并尝试将其与您的相协调。
仅供参考，因为我使用了最新的 jQuery (1.5.1)、jQuery 模板和 Knockout 库，所以我的示例被破坏了。我用@RP 的示例库替换了所有这些，它起作用了。

【解决方案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

【讨论】：

您刚刚帮我解决了过去 2 天一直困扰我的问题。谢谢。