Как включить привязку данных в KnockoutJS с помощью механизма просмотра ASP.NET MVC 3 "Razor"?

Я пытаюсь реализовать этот пример нокаута с помощью механизма просмотра ASP MVC 3 "Razor".

В первом разделе рассматривается простая привязка данных массива С# с использованием стандартного механизма просмотра ASP. Я пытаюсь пример с использованием "Razor", и эта строка:

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

приводит к пустой переменной для initialData.

Я также пробовал это:

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

И затем укажите начальную дату следующим образом:

var initialData = @Html.Raw(data);

Это заполняет initialData с помощью набора данных, но привязка не работает.

Я просто пытаюсь привязать этот набор, чтобы отобразить количество идей, как в примере:

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

Почему в этом случае не работает привязка данных?

Ответ 1

Самый простой способ в MVC3:

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

Ответ 2

Я столкнулся с этой проблемой и обнаружил, что это была моя собственная глупость, вызвавшая проблему (которая так часто бывает). Я забыл подождать, пока DOM загрузит вызов ko.applyBindings(viewModel) - так просто используя:

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

Итак, весь script как

<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