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

这是我到目前为止的 fiddle : 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 '';   
    }

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