javascript - Knockout JS 电子表格计算

Question

我正在处理 HTML 电子表格，使用 Knockout.js 进行数据绑定(bind)。我决定采用一个简单但不优雅的解决方案，这将使我能够更好地查看和控制每个绑定(bind)上发生的情况，但即便如此，我还是遇到了两个项目的障碍:百分比和放置逗号在结果计算中。

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

我设法在总计上使用:.replace(/\B(?=(\d{3})+(?!\d))/g, ",")，但是当我将它添加到两个项目(viewModel.C11 和 viewModel.D11)中时，它打破了表格，给出了总数。

对于百分比，我正在尝试执行以下操作:(C11-D11)/C11，这对于显示折扣很有用。

有人知道如何解决这两个问题吗？

这是 knockout 代码:

  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); 的问题是您正在调用toFixed在一根绳子上。将整个计算放在另一组括号中将解决该问题。

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

通过格式化 C11 破坏应用程序的原因和D11是其他计算的可观察量正在尝试在其计算中使用格式化的返回值。自 D13没有其他可观察量依赖于它，它可以工作。

您需要提供一种方法来区分计算值和渲染/格式化值。快速简便的方法是在模型上提供实用函数来执行格式化。

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

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