javascript - 仅当用户更改时才将值更新到数据库，或者如果代码更改值则暂停某些订阅

Question

从 View 模型中，我想在 View 中更改值后立即将值更新到服务器。

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

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

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

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

这两个值都可以由用户更改，并且通过显式订阅更新到服务器/数据库可以正常工作。

在服务器端，更新itemCode时也会更新itemName的值。因此，对客户端的响应将返回 json 对象，其中包含 itemName

的新值

这里我遇到了问题，因为更改 View 模型中 itemName 的值将触发订阅回调方法，该方法将再次将相同的值更新到服务器

    updateCode = (newvalue: string) =>
    {
        //Update value to the server
        //in the handler of the successful request
        this.itemName(updatedvaluefromServer);   //-- this trigger another request   
    }

问题:是否可以更改 KnockoutObservable 的值，使其仅通知 View 订阅者？
或者是否可以从 View 中检测到该值已更改？

我尝试使用 @RPNiemeyer 的“偷偷更新”https://stackoverflow.com/a/17984353/1565525
但这种方法将暂停所有订阅者收到通知，包括 View 的订阅者

Answer 1

这是一个利用由常规可观察值支持的计算可观察值的模式:

class OrderLine
{
    private _itemCode: KnockoutObservable<string>;
    private _itemName: KnockoutObservable<string>;
    itemCode: KnockoutComputed<string>;
    itemName: KnockoutComputed<string>;

    constructor(code: string, name: string)
    {
        this._itemCode = ko.observable(code);
        this._itemName = ko.observable(code);

        this.itemCode = ko.computed({
            read: () => this._itemCode(),
            write: (newValue) => {
                this._itemCode(newValue);
                // Update server
                // In the handler of the successful request:
                this._itemName("...");
            }
        });

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

在成功的 Ajax 调用的回调中，您将更新支持可观察值，而不是计算中的写入，以防止出现问题。