knockout.js - 如何获得两个相互绑定(bind)的计算值？

我想做的是使两个文本框的数学保持同步。我正在使用的字段是小计，taxTotal，税率和销售总额。我想发生的是:

如果用户更新了taxRate，则taxTotal将以正确的金额(subTotal * taxRate)更新。

如果用户更新了taxTotal，则应使用正确的金额(taxTotal / subTotal * 100)更新taxRate

我对此并不太了解，这是因为我一直在考虑具有后备字段的属性(例如在C#中)，并且在尝试找出使所有内容保持绑定(bind)和可观察性的逻辑时遇到了麻烦剔除框架(管理脏状态等)。

有人对此有解决方案吗？据我所知，我使用pureComputed代替了compute。例如

this.subTotal = ko.observable(0.00);

this.taxRate = ko.pureComputed({
     read: function(){

     },
     write: function(){

     },
     owner: this
});

this.taxTotal = ko.pureComputed({
    read: function(){

     },
     write: function(){

     },
     owner: this
});

this.saleTotal = ko.computed(function(){
    return this.subTotal ()+ this.taxTotal();
});

最佳答案

这是一个有趣的发现。一个规则定义了为taxTotal计算的读取函数，另一个规则定义了写入函数。其他两个变量只是可观察的。我忽略了100乘数，因为它不是对称的。它必须同时具有两个功能或两者都不起作用。

var viewModel = (function () {
    var subTotal = ko.observable(10),
        taxRate = ko.observable(5);


    var taxTotal = ko.computed({
        read: function () {
            return subTotal() * taxRate();
        },
        write: function (newValue) {
            taxRate(newValue / subTotal());
        }
    });

    return {
        taxRate: taxRate,
        taxTotal: taxTotal,
        subTotal: subTotal
    };
}());

ko.applyBindings(viewModel);

http://jsfiddle.net/ypsdh53q/