Question

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

如果用户更新了taxRate，则taxTotal将使用正确的金额更新（subTotal * taxRate）。
如果用户更新了taxTotal，则应使用正确的金额更新taxRate（taxTotal / subTotal * 100）

我对此并没有太大的了解，我认为这是因为我一直在考虑使用支持字段的属性（比如在C＃中）而且我在设法找出保持一切约束的逻辑时遇到了麻烦在淘汰框架内可观察（管理肮脏的国家等）。

有人有解决方案吗？据我所知，我使用pureComputed而不是计算。 e.g。

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();
});

Answer 1

这很有趣。一个规则定义了计算的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/

如何让两个计算值相互绑定？

1 个答案: