将 ko.observable 更改为 ko.computed 反之亦然答案

【问题标题】：Changing A ko.observable into a ko.computed and vise versa将 ko.observable 更改为 ko.computed 反之亦然
【发布时间】：2013-11-22 22:49:09
【问题描述】：

我正在使用 knockout.js 设计一个基于 Javascript 的欧姆定律计算器（电压、电阻、电流）。

我希望用户能够选择计算的内容，例如电压、电阻或电流，给定其他两个参数，通过单选按钮。

所以我的问题是，在调用ko.applyBindings() 之后，您能否将ko.observable 更改为ko.computed，反之亦然？

我最初的尝试说不，我已经尝试了这个，并且在不工作的代码上苦苦挣扎了几个小时，试图让它工作。

【问题讨论】：

什么是 ko.calculated？
对不起，我的意思是 ko.computed。我已更新问题以反映这一点。
为什么要切换它们？
如上所述，我希望用户能够选择计算哪个变量（使其成为计算变量和其他两个可观察变量）。欧姆定律可以是 V=IR、I=V/R 或 R=V/I。
knockoutjs.com/documentation/computedObservables.html

标签： javascript binding knockout.js calculator

【解决方案1】：

你不能那样做，但你可以让它们都读/写ko.computeds，在写入时存储一个“影子”值，如果它们不是被选中的，则在读取时返回该值数量（如果不是，则返回计算值）

【讨论】：

我可以更改 ko.computed 的“计算”功能吗？如果没有，我可能不得不寻找另一个框架。

【解决方案2】：

您甚至不需要像 ebohlman 建议的那样为此计算可写

一个简单的演示

http://jsfiddle.net/K8t7b/

ViewModel = function() {
    this.selected = ko.observable("1");
    this.valueOne = ko.observable(1);
    this.valueTwo = ko.observable(5);

    this.result = ko.computed(this.getResult, this);    
}

ViewModel.prototype = {
    getResult: function() {
        if(this.selected() === "1") {
            return this.valueOne() - this.valueTwo();
        }

        return this.valueOne() + this.valueTwo();
    }
};

ko.applyBindings(new ViewModel());

编辑：嗯，如果您希望结果显示在正确的值文本框中，您需要使它们像 ebohlman suggets 一样可写计算

【讨论】：

我不是将可观察对象更改为计算对象，反之亦然，而只是更改计算公式。请参阅下面的答案...

【解决方案3】：

正如 ebohlman 提到的，我缺少的最重要的东西是 shadow-variables，以及为 ko.computed 使用单独的读/写过程（最近添加的淘汰功能）。

三个变量之一的代码是：

this.voltageS = ko.observable();

this.voltage = ko.computed({
    read: function () {
        if(this.calcWhat() == 'voltage')
        {
            console.log('Calculating voltage');
            if(this.currentS == null)
                return;
            if(this.resistanceS == null)
                return;
            this.voltageS(this.currentS()*this.resistanceS());
            return(this.currentS()*this.resistanceS());
        }
        else
        {
            console.log('Reading from voltage');
            return this.voltageS();
        }
    },
    write: function (value) {
        console.log('Writing to voltage');
        this.voltageS(value)
    },
    owner: this
});

我创建了一个 JSFiddle here，它演示了能够在计算哪个变量之间切换。

此代码的另一个关键部分是，在读取时，如果它恰好是选定的变量，以及从其他两个计算它，我还必须将此结果写回影子变量。这可以防止某些变量在所选变量更改时神秘地消失/重新出现。

【讨论】：