Question

I have Knockout.js view model that has nested observable arrays.

   function ParentVM(data) {
        var self = this;

        self.childs= ko.observableArray([]);
        ko.mapping.fromJS(data, mapping, this);
    }

    function ChildVM(data) {
        var self = this;

        self.propertyA = ko.observableArray([]);
        self.propertyB = ko.observable();

        ko.mapping.fromJS(data, mapping, this);
    }

    function GrandChildVM(data) {
        var self = this;

        self.propertyX = ko.observable();
        self.propertyY = ko.observable();
        self.propertyZ = ko.observable();

        ko.mapping.fromJS(data, mapping, this);
    }

I have following bindings:

 data-bind="value: propertyX, valueUpdate: 'keydown'"

Now, how can I add event handler to call my REST endpoint to update view model state when these properties changes?

Answer 1

If I understand you correctly, this is what you can do:

function ChildVM(data) {
    var self = this;

    self.propertyA = ko.observableArray([]);
    self.propertyB = ko.observable();

    ko.mapping.fromJS(data, mapping, this);

    self.propertyA.subscribe(function (newValue) { /* call you're api with new value! */ });
    self.propertyB.subscribe(function (newValue) { /* call you're api with new value! */ });
}