更新数据集时触发 Knockout Change Event（相关下拉菜单）

Question

我希望这只是我有点修剪，但是当我不希望更改事件触发时，我遇到了麻烦。我会尽量保持简短和清晰。

我有两个下拉菜单，国家和城市。两者的约束如下：

<select data-bind="options: Countries, event: { change: IChanged }, value: CountrySelected">
<select data-bind="options: Cities, event: { change: IChanged }, value: CitySelected">

我的小视图模型

self.Countries = ko.observableArray([]);
self.Cities = ko.observableArray([]);
self.CountrySelected = ko.observable();
self.CitySelected = ko.observable();

现在我的函数IChanged()

self.IChanged = function(item) {
    GoGetMyOptions().done(function(response) {
        self.Cities(response);    
    });
}

问题！

调用self.Cities(response);时会触发City下拉菜单的change事件，这意味着下拉菜单会再次调用该方法。

警告

我已经简化了这个，我可以有 1 到 80 个过滤器。在我的代码中，我基本上开始加载右侧所有内容的下拉选项，问题是它为右侧所有内容调用更改事件：O Ideas any?

一个更复杂的例子（接近我的代码

我其实有一个过滤器集合，self.FilterCollection，每个过滤器都有以下内容：

self.DropDownValues = ko.observableArray([]);
self.SelectedValue = ko.observable();

You can see that when a drop down is selected, it updates the selected value and THEN refreshed the DropDownValues array for all filters to the right.

在一个相当尴尬的场景中，

1. 用户选择了一个城市
2. 他们选择了一个国家
3. CITY 列表已更新
4. 因此重置当前值**

我相信数字 4 会触发订阅...

一个完整的场景

有 4 个下拉菜单，A、B、C 和 D。

当用户从 A 中选择一个值时，我将遍历剩余的下拉菜单并调用 getValues，然后这将更新 DropDownValues 可观察对象。

因此，我希望 1 UI 事件触发说“用户更改了下拉 a”，然后我需要进行 3 ajax 调用来加载 B、C和 D 并更新可观察数组。

我的问题是，当用户选择 A 时，它会正确地进行 3 次 ajax 调用，但是在设置 B 的值时会触发事件...

这意味着 B 将进行 2 次 ajax 调用来更新 C 和 D。因此，当用户在下拉 A 中选择某些内容时，它实际上会触发：

1 个 UI 事件，3 个 Ajax 调用，1 个 UI 事件，2 个 ajax 调用，1 个 UI 事件，1 个 ajax 调用，然后是一个最终的 UI 事件。总而言之，用户一键进行 4 次 UI 事件调用和 6 次 ajax 调用 :(

Answer 1

我有一种直觉，你问这个问题过于简单，但就目前而言，关于你的再现有两个要点：

1. 您正在订阅 DOM 事件。不需要：改用基于视图模型的订阅。它会为您提供更多控制权并允许您对其进行单元测试。
2. 您在更改Cities 下拉列表时调用IChanged，这没有任何意义。当用户更改城市时，为什么要更新可用城市列表？

无论如何，这是防止循环更新的一种方法：

function GoGetMyOptions(country) {
  console.log("Doing ajaxy stuff");
  return {
    done: function(callback) {
      if (country === "USA") callback(["New York", "L.A.", "Chicago"]);
      if (country === "GBR") callback(["London", "Manchester", "Leeds"]);
      if (country === "GER") callback(["Bonn", "Koln", "Hamburg"]);
    }
  };
}

function ViewModel() {
  var self = this;

  self.Countries = ko.observableArray([]);
  self.Cities = ko.observableArray([]);
  self.CountrySelected = ko.observable();
  self.CitySelected = ko.observable();
  
  self.CountrySelected.subscribe(function(newVal) {
    GoGetMyOptions(newVal).done(function(response) {
      self.Cities(response);
    });
  });

}

var vm = new ViewModel();

vm.Countries.push("USA", "GBR", "GER");

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<select data-bind="options: Countries, value: CountrySelected"></select>
<select data-bind="options: Cities, value: CitySelected"></select>

正如您在控制台上看到的，更改城市时不会发生 Ajax 调用，只有更改国家/地区时才会发生。