正确构建 knockoutjs 视图模型和服务器调用

Question

我是淘汰赛的新手，今天已经成功地将一个页面与一些绑定和几个 ajax 调用放在一起。这很有趣！

现在我已经有了这些基本功能，我需要考虑接下来会发生什么。

情况：

我有一个“设置”页面，上面有 4 个标签。每个选项卡都会有一些输入字段，基本的表单元素，但都将通过敲除绑定，数据将使用asp.net WebApi和ajax来回传递。

问题是，当我开始集成页面上的其他选项卡时，如何构建我当前的视图模型以确保我不会遇到一些障碍？

这是我当前的完整视图模型：

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 属性。还要研究映射插件，以减少构建和序列化单个 ViewModel 所涉及的重复和容易出错的代码量。

您的顶级 VM 应包含一个 observable，供您的设置页面中的 template 绑定使用，以便为每个选项卡的内容选择适当的模板。

更新

“顶级”虚拟机示例：

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

其中userSettings、readPreferences 和sharePreferences 是各个选项卡的虚拟机，activeTab 指定用于当前显示选项卡的模板的 ID。

template 绑定的 Knockout 文档非常出色。