javascript - 在不引起递归的情况下将两个 knockout 变量连接在一起

Question

在为名为 candy-calc 的在线计算器框架开发代码时，我有两个 ko.observables，分别是 calcVar1.selUnit 和 calcVar2.selUnit，我想将它们连接在一起。我的意思是，如果一个改变，另一个也会改变，反之亦然。我尝试解决这个问题的方法是创建两个显示变量 calcVar1.dispSelUnit 和 calcVar2.dispSelUnit，它们是 ko.computed()。它们在 View 中绑定(bind)，它们具有不同的读/写功能，如下所示。

    // Modified write function  
     calcVar1.dispSelUnit = ko.computed({
        read : function(){
            console.log('Reading source var sel unit.');

            // Return as usual
            return calcVar1.selUnit();
        },
        write : function(value){
            // Write to both of them
            console.log('Writing ' + value + 'to both sel unit.');
            calcVar1.selUnit(value);
            calcVar2.selUnit(value);
        },
        owner : this
    });

    // Modified write function
    calcVar2.dispSelUnit = ko.computed({
        read : function(){
            console.log('Reading destination var sel unit.');

        // Make it equal to the source variables selected unit
            return calcVar2.selUnit();
        },
        write : function(value){
            // Write to both of them
            console.log('Writing ' + value + 'to both sel unit.');

            calcVar1.selUnit(value);
            calcVar2.selUnit(value);
        },
        owner : this
    });
}

所以基本上，dispSelUnits 充当下面真实 selUnit 值的中介，并在写入时更新 selUnit(ko.observables)，而在读取时表现正常。

我看不出这个逻辑有什么问题。但是，在运行此程序时，如果我尝试更新 compVar1.dispSelUnit，它会进入一个无限循环，其中 compVar1.dispSelUnit 被写入然后读取，然后是 compVar2。 dispSelUnit 被写入和读取，然后再返回。

Answer 1

我们还在 Github ( https://github.com/mbest/knockout-deferred-updates/issues/17) 上讨论了这个问题。看了他的代码后，我提出了以下的观察和建议。

您遇到了递归问题，因为这两个变量具有 value 绑定(bind)以选择具有不同单位列表的框。尽管它们显示相同的单位，但它们实际上是不同的对象。 value 绑定(bind)总是尝试将 observable 设置为列表中当前选定的项目。但由于列表不同，这确实是不可能的，并且 observable 会在两个值之间无休止地切换。

要解决此问题，您需要两个选择框都引用相同的对象。在 standard-resistance-finder.js 中，执行此操作:

var resistenceUnits = [
    new cc.unit('m\u2126', 0.001),
    new cc.unit('\u2126', 1.0),
    new cc.unit('k\u2126', 1000.0)
];

this.desiredRes = new cc.input(
    this,
    function() { return true; },
    resistenceUnits,
    0);

...

this.actualRes = new cc.output(
    this,
    ...
    resistenceUnits,
    0, 2);

关于保持两个可观察量同步的问题，这个问题可能会提供一些答案:Simple, clean way to sync observables from different view models