1

嗨，我正在尝试使用 4 个文本框制作一个简单的计算器，问题是当我对函数执行乘法运算时，输出仅在我完成四个文本框的输入值时显示，我怎样才能使它的值会像在加法操作中一样更新吗？

这是我的代码：

function ViewModel() {
var self =this;
self.firstNumber = ko.observable("");
self.secondNumber = ko.observable("");
self.thirdNumber = ko.observable("");
self.fourthNumber = ko.observable("");


self.Sum = ko.computed(function(){
return Number(self.firstNumber()) + Number(self.secondNumber()) + Number(self.thirdNumber()) +
Number(self.fourthNumber());
});

self.Product = ko.computed(function(){
 return Number(self.firstNumber()) * Number(self.secondNumber()) * Number(self.thirdNumber()) *
 Number(self.fourthNumber());
});

到目前为止，这是我的小提琴：http: //jsfiddle.net/a_miguel6687/UvJAU/

4

2 回答 2

1

问题是，当用作数字时，javascript 将空字符串视为零，因此，如果您的任何文本框为空白，那么，零乘以任何东西都是零。

处理此问题的一种方法是将空字符串视为“1”，如下所示：

function defaultToOne(numString) {
    return numString === '' ? 1 : Number(numString);
}

那么你的乘法代码可以是：

self.Product = ko.computed(function(){
    return defaultToOne(self.firstNumber()) * defaultToOne(self.secondNumber()) * defaultToOne(self.thirdNumber()) * defaultToOne(self.fourthNumber());
});

小提琴

编辑：如果所有文本框都是空的，默认情况下这将显示“1”作为产品。这并不可怕，在某种程度上，零数字的乘积是任意的。但是如果你想给出一个不同的默认值，你可以在你的产品函数的第一行做这样的事情。

if((self.firstNumber() + self.secondNumber() + 
   self.thirdNumber() + self.fourthNumber()) === '') {
        return '';   
    }

请注意，这是用“+”号进行字符串连接，而不是数学加法；这是检查所有四个框是否为空的一种简短方法。

于 2013-08-29T21:50:53.183 回答
0

空文本框将意味着空字符串将意味着 0（零）。此外，这不会是一个问题。对于乘法，这意味着乘积无论如何都将为零。

确保您以不同方式处理空文本框（例如将其解释为 1 或完全忽略它）。

这是一种不高效、不优雅但非常易于解释的方式：

self.Product = ko.computed(function(){
    var n1 = self.firstNumber();
    var n2 = self.secondNumber();
    var n3 = self.thirdNumber();
    var n4 = self.fourthNumber();

    if (n1 === "" && n2 === "" && n3 === "" && n4 === "") { return ""; }

    if (n1 === "") { n1 = 1; }
    if (n2 === "") { n2 = 1; }
    if (n3 === "") { n3 = 1; }
    if (n4 === "") { n4 = 1; }

    return n1 * n2 * n3 * n4;
});

看到这个小提琴。

同样，以上不是推荐的生产代码，仅仅意味着对正在发生的事情非常冗长。

于 2013-08-29T21:46:08.690 回答