Knockout Computed Observable 只识别一个 Observable

Question

背景：我正在使用 Knockout 3.4.0 制作网页。在页面上，我使用计算出的 observable 来计算费用成本（以美元为单位）。费用可以是百分比或统一费率，并且此百分比/统一费率信息可以插入两个文本框之一。我使用单选按钮和 jQuery 让用户选择哪个文本框处于活动状态，因为用户只能选择百分比或统一费率。我也在使用 JSON 和 ko.mapping 加载视图模型，但这似乎不是这里的问题。还要提一下客户端的目标浏览器是IE11或者Edge。

问题： 计算出的 observable 似乎没有订阅统一费率文本框中的更改。当我在本地主机上运行应用程序时（应用程序本身是 .NET MVC），统一费率文本框响应一次。当我将代码移至JSFiddle 以撰写本文时，该框根本没有响应。这是可观察的：

self.serviceFeeComputed= ko.computed(function () {
    if (self.ServiceFee.Percentage() !== null 
        && self.ServiceFee.Percentage() !== 0) {
            return self.Amount() * (self.ServiceFee.Percentage() / 100);
    } else {
        return self.ServiceFee.FlatRate();
    }
});

解决问题的尝试：在过去的两周里，我花了大约 6 到 8 个小时试图解决这个问题。以下是我尝试过的一些事情：

1. 我以不同的方式定义了视图模型，例如函数或 JavaScript 对象：var viewModel = { ... }

2. 我已将 ServiceFee 转换为 observable - 没有结果，所以我改回来了。

3. 我已将百分比文本框复制到统一费率文本框上，以确保其他属性相同。

4. 我已从ko.computed() 切换到ko.pureComputed()

5. 我已经切换了条件语句的运行顺序，所以我先检查self.ServiceFee.FlatRate()。这会导致统一费率文本框更新费用，而不是百分比。关闭这个事实，我进行了搜索并找到了这个SO question，但是在调用计算中的两个可观察对象时，我没有得到工作结果。我还尝试了这个解决方案的不同变体，例如使用 observables 创建变量，或者将它们加在一起。不管我做什么，条件语句中检查的第一个变量似乎是接收订阅的变量。

   self.serviceFeeComputed = ko.computed(function () {
       self.ServiceFee.Percentage();
       self.ServiceFee.FlatRate();
       if (self.ServiceFee.Percentage() !== null && self.ServiceFee.Percentage() !== 0) {
           return self.Amount() * (self.ServiceFee.Percentage() / 100);
       } else {
           return self.ServiceFee.FlatRate();
       }
   });
   

理想分辨率：无论用户在百分比和固定费率之间来回切换多少次，我都希望两个文本框都更新计算的 observable。

提前致谢。

Answer 1

您的问题来自两件事：

1. 正如Drummad 一样 在他的评论中指出，你把事情复杂化了 错误地将 jQuery 与 KO 结合使用
2. 您在确定何时使用 Percent 和何时使用 Flatrate 的条件方面存在错误

我已将您的代码修复为CodePen

// You will not need jQuery at all, KO is enough
// You need a boolean property to determine if the Flatrate or the Percentage is used
self.ServiceFee = {
  Percentage: ko.observable(),
  FlatRate: ko.observable(),
  IsPercentage: ko.observable(true) // Add this property to ServiceFee
};

self.serviceFeeComputed = ko.computed(function() {
  //if (self.ServiceFee.Percentage() !== null && self.ServiceFee.Percentage() !== 0) {
  if (self.ServiceFee.IsPercentage()) { // this is the right condition
    return self.Amount() * (self.ServiceFee.Percentage() / 100);
  } else {
    return self.ServiceFee.FlatRate();
  }
});

<!-- You will not need jQuery at all, KO is enough -->
<!-- You need a boolean property to determine if the Flatrate or the Percentage is used -->

<label class="radio-inline col-xs-2 col-xs-offset-1">
  <input name="Test" type="radio" data-bind="checkedValue: true, checked: ServiceFee.IsPercentage" />
  <!-- <input type="radio" name="percentageOrFlatRate" value="percentage" /> -->
</label>
... other code ...
<input class="form-control"
  data-bind="textInput: ServiceFee.Percentage, valueUpdate: 'afterkeydown', enable: ServiceFee.IsPercentage"
  data-value="percentage" id="ServiceFee_Percentage" name="ServiceFee.Percentage"
  placeholder="0.00" type="number" value="" />

... other code ...

<label class="radio-inline  col-xs-2 col-xs-offset-1">
  <input name="Test" type="radio" data-bind="checkedValue: false, checked: ServiceFee.IsPercentage" />
  <!-- <input type="radio" name="percentageOrFlatRate" value="flatRate" /> -->
</label>
... other code ...
<input class="form-control"
  data-bind="textInput: ServiceFee.FlatRate, valueUpdate: 'afterkeydown', disable: ServiceFee.IsPercentage"
  data-value="flatRate" id="ServiceFee_Percentage" name="ServiceFee.Percentage"
  placeholder="0.00" type="number" value="" />