Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

Question

Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

After a change in the viewmodel, I want to immediately update the value on the server.

class OrderLine
{
    itemCode: KnockoutObservable<string>;
    itemName: KnockoutObservable<string>;

    constructor(code: string, name: string)
    {
        this.itemCode = ko.observable(code);
        this.itemName = ko.observable(code);
        
        this.itemCode.subscribe(this.updateCode, this, "change");
        this.itemName.subscribe(this.updateName, this, "change");
    }

    updateCode = (newvalue: string) =>
    {
        //Update value on the server
    }

    updateName = (newvalue: string) =>
    {
        //Update value on the server
    }
}

Users can change both values, and with explicit subscriptions, updating to the server/database works correctly.

On the server side, updating itemCode will also update the value of itemName. Thus, the response to the client will include a json object with the new value for itemName

The issue arises when changing the value of itemName in the viewmodel triggers a subscription callback method that updates the same value on the server again

    updateCode = (newvalue: string) =>
    {
        //Update value on the server
        //Upon successful request
        this.itemName(updatedvaluefromServer);   
    }

Question: Is it possible to change the value of a KnockoutObservable that only notifies view subscribers?
Or is there a way to detect if the value was changed from the view?

I attempted to use the "sneaky update" technique by @RPNiemeyer mentioned here
However, this approach suspends notification for all subscribers, including those in the view

javascript knockout.js typescript

Answer 1

Answer №1

Check out this innovative approach that combines a computed observable with a regular observable:

class ProductItem
{
    private _itemNumber: KnockoutObservable<string>;
    private _itemName: KnockoutObservable<string>;
    itemNumber: KnockoutComputed<string>;
    itemName: KnockoutComputed<string>;

    constructor(number: string, name: string)
    {
        this._itemNumber = ko.observable(number);
        this._itemName = ko.observable(name);

        this.itemNumber = ko.computed({
            read: () => this._itemNumber(),
            write: (newVal) => {
                this._itemNumber(newVal);
                // Update database
                // Upon a successful response:
                this._itemName("...");
            }
        });

        this.itemName = ko.computed({
            read: () => this._itemName(),
            write: (newVal) => {
                this._itemName(newVal);
                // Update database
            }
        });
    }
}

Remember to update the underlying observable in the success callback of your AJAX requests, rather than directly in the write function of the computed property, to avoid any issues.

Answer 2

Check out this innovative approach that combines a computed observable with a regular observable:

class ProductItem
{
    private _itemNumber: KnockoutObservable<string>;
    private _itemName: KnockoutObservable<string>;
    itemNumber: KnockoutComputed<string>;
    itemName: KnockoutComputed<string>;

    constructor(number: string, name: string)
    {
        this._itemNumber = ko.observable(number);
        this._itemName = ko.observable(name);

        this.itemNumber = ko.computed({
            read: () => this._itemNumber(),
            write: (newVal) => {
                this._itemNumber(newVal);
                // Update database
                // Upon a successful response:
                this._itemName("...");
            }
        });

        this.itemName = ko.computed({
            read: () => this._itemName(),
            write: (newVal) => {
                this._itemName(newVal);
                // Update database
            }
        });
    }
}

Remember to update the underlying observable in the success callback of your AJAX requests, rather than directly in the write function of the computed property, to avoid any issues.

Answer 3

Answer №2

Let me explain the concept I mentioned earlier. The code is an observable value, while the name is a writable computed value. When the code gets updated, it automatically updates the read value of name. On the other hand, when you write to the name, it updates the code which in turn updates the read value of name. This results in only one update to the observable value of name, so there are not two separate updates.

If you observe the console carefully, you will see that updating either field triggers a single update for each of them.

function orderLine(code, name) {
  return {
    code: code,
    name: name
  };
}
var serverValues = [
  orderLine(1, 'one'),
  orderLine(2, 'two'),
  orderLine(3, 'three')
];

function getNameFromCode(code) {
  var found = ko.utils.arrayFilter(serverValues, function(line) {
    return line.code == code;
  });
  if (found.length == 0) return '';
  return found[0].name;
}

function getCodeFromName(name) {
  var found = ko.utils.arrayFilter(serverValues, function(line) {
    return line.name == name;
  });
  if (found.length == 0) return '';
  return found[0].code;
}

function vm() {
  var self = {};
  self.code = ko.observable();
  self.name = ko.computed({
    read: function() {
      return getNameFromCode(self.code());
    },
    write: function(newValue) {
      console.debug("Writing code");
      self.code(getCodeFromName(newValue));
    }
  });

  self.code.subscribe(function(newValue) {
    console.debug("Updating code to:", newValue);
  });
  self.name.subscribe(function(newValue) {
    console.debug("Updating name to:", newValue);
  });

  return self;
}

ko.applyBindings(vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label>Code</label>
<input data-bind="value:code" />
<br />
<label>Name</label>
<input data-bind="value:name" />

Answer 4

Let me explain the concept I mentioned earlier. The code is an observable value, while the name is a writable computed value. When the code gets updated, it automatically updates the read value of name. On the other hand, when you write to the name, it updates the code which in turn updates the read value of name. This results in only one update to the observable value of name, so there are not two separate updates.

If you observe the console carefully, you will see that updating either field triggers a single update for each of them.

function orderLine(code, name) {
  return {
    code: code,
    name: name
  };
}
var serverValues = [
  orderLine(1, 'one'),
  orderLine(2, 'two'),
  orderLine(3, 'three')
];

function getNameFromCode(code) {
  var found = ko.utils.arrayFilter(serverValues, function(line) {
    return line.code == code;
  });
  if (found.length == 0) return '';
  return found[0].name;
}

function getCodeFromName(name) {
  var found = ko.utils.arrayFilter(serverValues, function(line) {
    return line.name == name;
  });
  if (found.length == 0) return '';
  return found[0].code;
}

function vm() {
  var self = {};
  self.code = ko.observable();
  self.name = ko.computed({
    read: function() {
      return getNameFromCode(self.code());
    },
    write: function(newValue) {
      console.debug("Writing code");
      self.code(getCodeFromName(newValue));
    }
  });

  self.code.subscribe(function(newValue) {
    console.debug("Updating code to:", newValue);
  });
  self.name.subscribe(function(newValue) {
    console.debug("Updating name to:", newValue);
  });

  return self;
}

ko.applyBindings(vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<label>Code</label>
<input data-bind="value:code" />
<br />
<label>Name</label>
<input data-bind="value:name" />

Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

Answer №1

Answer №2

Similar questions

Tips for implementing and utilizing onclick functions in EJS

Ajax script causes error 403 when loading content while scrolling

Retrieve the nth element from an array using a function that requires 2 arguments

Transforming API response data into a Typescript object using React mapping

What could be causing me to receive no results?

Close pop-up upon successful AJAX response in ASP.NET MVC

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Is there a chance of a race condition occurring during file uploads when processed individually through AJAX with PHP?

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

What is the best way to retrieve the specific property from a bound function?

Having trouble hiding the message "Not found" with ng-hide and filters in AngularJS

Display or conceal a <div> segment based on the drop down selection made

What is the most effective way to structure a React function incorporating nested objects and mapping?

AgGrid supports multi-line content within its cells

Is there a way to modify page URLs without causing a refresh, regardless of browser?

How can we effectively manage error responses and retry a failed call in NodeJS without getting tangled in callback hell?

Is it possible to populate a div using jQuery Datatable?

Steps for transforming 112889 (in mmddyy format) into 11/28/89 or 11/28/1989

The ng-repeats functionality is triggered multiple times whenever I attempt to make this call

The update feature activates upon reaching the bottom of the page, but it continues to refresh constantly