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

Is there a beginner's pack or trial version available for utilizing TypeScript with IBM Cloud Functions / OpenWhisk?

Exploring the Power of React's Ref API

Looking to establish combinations in typescript? The answer lies in utilizing a discriminated union

The typings for object properties in Typescript

Unable to detect tsc after installing globally within Windows Sandbox

What is the proper method for utilizing the "oneOf" keyword in this schema?

I need help on correctly retrieving the ng-model value in a controller when using it with the contenteditable directive

TypeScript in Angular causing lodash tree shaking failure

Exploring the world of reactive programming in JavaScript by transforming traditional AJAX calls into Bacon.js streams while incorporating

modify the color of text in a row within a jquery ajax table

Is there a way to search for multiple items using just one search term?

Refresh the current page with jQuery Mobile when it is clicked

When using Typescript inheritance, the datatypes shown in IntelliSense are unexpectedly listed as "any" instead of

An error was encountered while attempting to utilize Google's Core Reporting API: Uncaught SyntaxError: Unexpected token <

What steps can be taken to avoid an abundance of JS event handlers in React?

Struggling with setting up a PHP and Ajax registration and login system

What is the method to invoke a function within a factory in angularjs by using a string parameter?

Error: Unable to locate the reference

Duplicate text content from a mirrored textarea and save to clipboard

Display the React component following a redirect in a Next.js application that utilizes server-side rendering