In a program using knockout.js with multiple ViewModels, how can know one specific view model is changed by change in the property?

Question

I am using asp.net mvc with knockout for data binding. I have three view models which are as below:

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 as below:

<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>

The default value for these input fields is fetched from 3 different tables in the database. I want to edit these values and update data in those tables.

If I change a value of inputs in PersonViewModel only, I want to make an ajax request that will call update query for person table only. And same for address and contact ViewModel. I know how to make ajax request.

But my problem is: Using knockoutJs, how can I know that only those particular ViewModels that are updated so that I can leave the rest at it is?

Answer 1

For each View Model you could create a method to which other observables can subscribe to. For instance, for the 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);
 }

So whenever the value of firstName or lastName changes the updatePerson method will be triggered.

The same idea for the other view models

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);
}