Как я могу создать модели просмотра на стороне клиента для нокаута в проекте ASP.NET MVC?

В настоящее время я работаю над решением ASP.NET MVC и недавно представил как нокаут (MVVM JS-библиотеку), так и Wijmo (набор виджетов jQuery UI).

С введением Knockout мне также необходимо иметь модели на стороне клиента, поэтому для этой цели я сериализую С# ViewModel и привязываю ее к представлению с помощью data-model="@Model.ToJson()". Это позволяет мне получить модель от JS и применить к любой стороне клиентскую любовь.

Однако для нокаута все должно быть наблюдаемым, поэтому мне нужно объявить отдельную ViewModel на стороне клиента и отобразить все из объекта модели данных. Это очень похоже на дублирование усилий, и я хотел бы как-то избежать этого.

Я надеюсь, что у кого-то есть инструмент или техника для совместного использования, что позволит мне отображать нокаут ViewModel непосредственно с сервера. Возможное решение может включать:

  • Пользовательская сериализация JSON для визуализации наблюдаемой модели представления непосредственно на выходе в атрибуте модели данных.
  • Автоматическое преобразование на стороне клиента (я слышал о ko-autobind, но не уверен, что это будет рекомендуемый путь для принятия или насколько он стабилен/завершен)
  • Что-то я не думал о

Я хотел бы, чтобы решение было общим и автоматическим, так как мой текущий подход по набору видимых моделей просмотра на стороне клиента является слишком непродуктивным, чтобы быть жизнеспособным.

Как вы решаете эту проблему?

ОТВЕТЫ

Ответ 1

Согласно их учебникам, это просто простая функция .map

Если это ViewModel

function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

И эта функция получает данные с сервера, она использует функцию .map для ввода данных сервера прямо в VM

// Data
var self = this;
self.tasks = ko.observableArray([]);

// Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("/tasks", function(allData) {
    var mappedTasks = $.map(allData, function(item) {
        return new Task(item)
    });
    self.tasks(mappedTasks);
});

Для отображения ko http://knockoutjs.com/documentation/plugins-mapping.html

Для автоматического связывания здесь пример

https://groups.google.com/forum/#!msg/knockoutjs/IJTx37UXQVw/UTrWdEK1C-oJ