Knockout JS Spreadsheet Calc

我正在制作HTML电子表格，使用Knockout.js进行数据绑定。 我决定采用一种简单明了的方式，尽pipe这是一个无懈可击的解决scheme ，可以让我更好地看到和控制每个绑定上发生的事情，但即使如此，我还是碰到了一个包含百分比和逗号的路障。

这里是JSFiddle： http : //jsfiddle.net/WebMagi/NqBRT/

我设法使用： .replace(/\B(?=(\d{3})+(?!\d))/g, ",") ，但当它添加到两个项目（viewModel.C11和viewModel.D11）给我的总数。

至于百分比，我试图做到以下几点：（C11-D11）/ C11，这将是显示折扣有用。

任何人有想法如何解决这两个问题？

这里是淘汰赛代码：

  var viewModel = { C1: ko.observable(24.37), C2: ko.observable(1.5), C3: ko.observable(""), C4: ko.observable("4"), C5: ko.observable("4"), C6: ko.observable("8"), C8: ko.observable(""), C9: ko.observable(""), C10: ko.observable(""), C11: ko.observable(""), C12: ko.observable(""), D1: ko.observable(38.62), D2: ko.observable(1.5), D3: ko.observable(""), D4: ko.observable("9"), D5: ko.observable("4"), D6: ko.observable("8"), D8: ko.observable(""), D9: ko.observable(""), D10: ko.observable(""), D11: ko.observable(""), D12: ko.observable(""), D13: ko.observable("") }; viewModel.C3 = ko.computed(function () { return (this.C1() * this.C2()).toFixed(2); }, viewModel); viewModel.D3 = ko.computed(function () { return (this.D1() * this.D2()).toFixed(2); }, viewModel); viewModel.C8 = ko.computed(function () { return (this.C3() / this.C4()).toFixed(2); }, viewModel); viewModel.D8 = ko.computed(function () { return (this.D3() / this.D4()).toFixed(2); }, viewModel); viewModel.C9 = ko.computed(function () { return (this.C8() * this.C5()).toFixed(2); }, viewModel); viewModel.D9 = ko.computed(function () { return (this.D8() * this.D5()).toFixed(2); }, viewModel); viewModel.C10 = ko.computed(function () { return (this.C9() * this.C6()).toFixed(2); }, viewModel); viewModel.D10 = ko.computed(function () { return (this.D9() * this.D6()).toFixed(2); }, viewModel); viewModel.C11 = ko.computed(function () { return (this.C10() * 365).toFixed(2); }, viewModel); viewModel.D11 = ko.computed(function () { return (this.D10() * 365).toFixed(2); }, viewModel); //viewModel.C12 = ko.computed(function () { // return (this.C11() - this.D11()) / this.C11().toFixed(2); //}, viewModel); viewModel.D13 = ko.computed(function () { return (this.C11() - this.D11()).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, viewModel); ko.applyBindings(viewModel); 

谢谢。

Answer 1

(this.C11() - this.D11()) / this.C11().toFixed(2); 是你打电话给固定在一个string。 在另一组括号中围绕整个计算将解决这个问题。

 ((this.C11() - this.D11()) / this.C11()).toFixed(2); 

通过格式化C11和D11来中断应用程序的原因是，其他计算的可观察对象正试图在其计算中使用格式化的返回值。 由于D13没有其他依赖于它的可观察性，所以它是有效的。

您需要提供区分计算值和呈现/格式化值的方法。 快捷方式是在模型上提供一个实用function来执行格式化。

 viewModel.format = function(obs){ return obs().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 

Html： <span data-bind="text: format(C11)"></span>