Question

我正在尝试使用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>

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

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

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

2 个答案: