在使用带有多个 ViewModel 的 knockout.js 的程序中，如何知道一个特定的视图模型会因属性的变化而改变？

Question

我正在使用带有敲除的 asp.net mvc 进行数据绑定。 我有三个视图模型，如下所示：

function PersonViewModel() {
        this.firstName = ko.observable("@Model.FirstName");
        this.lastName = ko.observable("@Model.LastName");
    }
    function ContactViewModel() {
        this.homePhone = ko.observable("@Model.HomePhone");
        this.mobile = ko.observable("@Model.Mobile");
    }

    function AddressViewModel() {
        this.city = ko.observable("@Model.City");
        this.street = ko.observable("@Model.Street");
    }

 var pvm = new PersonViewModel();
    var avm = new AddressViewModel();
    var cvm = new ContactViewModel();
    var pNode = $("#personal-information").get(0);
    var aNode = $("#address-information").get(0);
    var cNode = $("#contact-information").get(0);
    ko.applyBindings(pvm, pNode);
    ko.applyBindings(avm, aNode);
    ko.applyBindings(cvm, cNode);

HTML如下：

<div id="personal-information">
    <input data-bind="value: firstName" type="text" >
    <input data-bind="value: lastName" type="text" >
</div>
<div id="contact-information">
    <input data-bind="value: homePhone" type="text" >
    <input data-bind="value: mobile" type="text" >
</div>
<div id="address-information">
    <input data-bind="value: city" type="text" >
    <input data-bind="value: street" type="text" >
</div>

这些输入字段的默认值取自数据库中的 3 个不同的表。我想编辑这些值并更新这些表中的数据。

如果我只更改 PersonViewModel 中的输入值，我想发出一个 ajax 请求，该请求将只为 person 表调用更新查询。 地址和联系 ViewModel 也是如此。我知道如何发出 ajax 请求。

但我的问题是：使用 knockoutJs，我怎么知道只有那些特定的 ViewModel 已更新，以便我可以保留其余部分？

Answer 1

对于每个视图模型，您可以创建一个其他可观察对象可以订阅的方法。例如，对于 PersonViewModel：

function PersonViewModel() {
    this.firstName = ko.observable("@Model.FirstName");
    this.lastName = ko.observable("@Model.LastName");

    this.updatePerson = function () { /* AJAX */ };

    // subscriptions
    this.firstName.subscribe(this.updatePerson);
    this.lastName.subscribe(this.updatePerson);
 }

因此，只要 firstName 或 lastName 的值发生变化，就会触发 updatePerson 方法。

其他视图模型的想法相同

function ContactViewModel() {
    this.homePhone = ko.observable("@Model.HomePhone");
    this.mobile = ko.observable("@Model.Mobile");

    this.updateContact = function () { /* AJAX */ };

    // subscriptions
    this.homePhone.subscribe(this.updateContact);
    this.mobile.subscribe(this.updateContact);
}

function AddressViewModel() {
    this.city = ko.observable("@Model.City");
    this.street = ko.observable("@Model.Street");

    this.updateAddress = function () { /* AJAX */ };

    // subscriptions
    this.city.subscribe(this.updateAddress);
    this.street.subscribe(this.updateAddress);
}