Структурирование правильных режимов просмотра и серверных вызовов

Question

Я новичок в нокауте и сегодня успешно собрал страницу с привязкой и несколькими вызовами ajax. Это забавно!

Теперь, когда у меня есть эти основные функции, я должен учитывать, что произойдет дальше.

Ситуация:

У меня есть страница «Настройки» с 4-мя вкладками на нем. Каждая вкладка будет иметь некоторые поля ввода, базовые элементы формы, но все они будут связаны с помощью нокаута, а данные будут возвращаться взад и вперед, используя asp.net WebApi и ajax.

Вопрос в том, как я могу структурировать текущую модель просмотра, чтобы убедиться, что я не сталкиваюсь с некоторыми препятствиями, когда я начинаю интегрировать другие вкладки на странице?

Вот мой текущий полный ViewModel:

function UserSettingsViewModel(apiBaseUrl, userId) { 
var self = this; 
self.firstName = ko.observable(); 
self.lastName = ko.observable(); 
self.primaryEmail = ko.observable(); 
self.secondaryEmail = ko.observable(); 
self.addressCity = ko.observable(); 
self.addressPostalCode = ko.observable(); 
self.addressCounty = ko.observable(); 
self.addressCountry = ko.observable(); 

self.fullName = ko.computed(function() { 
    return self.firstName() + " " + self.lastName(); 
}, this); 

$.getJSON(apiBaseUrl + "?userId=" + userId, function (data) { 
    alert(JSON.stringify(data)); 
    self.firstName(data.FirstName); 
    self.lastName(data.LastName); 
    self.primaryEmail(data.PrimaryEmail); 
    self.secondaryEmail(data.SecondaryEmail); 
    self.addressCity(data.City); 
    self.addressPostalCode(data.PostalCode); 
    self.addressCounty(data.County); 
    self.addressCountry(data.Country); 
}); 

self.updateName = function() { 
    alert('in update name method!'); 
    $.ajax({ 
     type: "PUT", 
     contentType: "application/json; charset=utf-8", 
     url: apiBaseUrl + "?userId=" + userId, 
     data: ko.toJSON({ 
      UserGuid: userId, 
      FirstName: self.firstName(), 
      LastName: self.lastName(), 
      PrimaryEmail: self.primaryEmail(), 
      SecondaryEmail: self.secondaryEmail(), 
      City: self.addressCity(), 
      PostalCode: self.addressPostalCode(), 
      County: self.addressCounty(), 
      Country: self.addressCountry() 
     }), 
     dataType: "json", 
     success: function (msg) { 
      alert('Success'); 
     }, 
     error: function (err) { 
      alert('Error'); 
     } 
    }); 
}; 
} 

И в самом зрения я делаю немного:

ko.applyBindings(new UserSettingsViewModel('@Url.RouteUrl("DefaultApi", 
new { httproute = "httproute", controller = "Settings" })', userId)); 

Опять же, я новичок (не трогали этот материал более года, и тогда я был не очень хорош).

Answer 1

Создайте ViewModel «верхнего уровня» и сделайте отдельную вкладку ViewModels ее свойствами. Также просмотрите плагин сопоставления, чтобы уменьшить количество повторяющихся и подверженных ошибкам кода, связанных с построением и сериализацией отдельных ViewModels.

Ваш VM верхнего уровня должен содержать observable, который используется привязкой template на странице настроек, чтобы выбрать соответствующий шаблон для содержимого каждой вкладки.

UPDATE

Пример «верхнего уровня» VM:

var vm={ 
    userSettings: new UserSettingsViewModel(...), 
    readPreferences: new ReadPreferencesViewModel(...), 
    sharePreferences: new SharePreferencesViewModel(...), 
    activeTab: ko.observable('user-settings') 
}; 
ko.applyBindings(vm); 

Где userSettings, readPreferences и sharePreferences являются виртуальными машинами для отдельных вкладок и activeTab указывает идентификатор шаблона для использования в настоящее время -shown.

Документация для нокаута для переписки template отличная.