在Knockout js中执行同时乘法

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处理为零，因此如果您的任何文本框为空，那么零时间任何内容都为零。处理这种

一种方法是把它处理为空字符串 '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()); 
}); 

Fiddle

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

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

请注意，这是用'+'符号进行字符串连接，而不是数学加法;这是检查这四个盒子是否都是空的简短方法。

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。

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