Question

您好我正在尝试使用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/

Answer 1

问题是，当用作数字时，javascript将空字符串视为零，因此如果任何文本框为空，那么零，任何事物都为零。

处理此问题的一种方法是让它将空字符串视为＆＃39; 1＆＃39;，如下所示：

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

Fiddle

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

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

请注意，这是使用＆＃39; +＆＃39;进行字符串连接。标志，而不是数学加法;这是检查所有这四个框是否为空的简短方法。

Answer 2

空文本框意味着空字符串将表示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;
});

请参阅this fiddle。

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

在Knockout js中执行同时乘法

2 个答案: