更新数据集时的淘汰赛变更事件触发（取决于下拉列表）

Question

I'm hoping this is just me being a bit of a prune but I am having trouble with the change event firing when I don't want it to. I will try and keep it short and sharp.

I have two drop downs, Country and City. both of these are bound as follows:

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

My little view model

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

Now my function IChanged()

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

The problem!

when calling self.Cities(response); it triggers the change event on the City drop down, this means that drop down will call the method again.

Caveat

I have simplified this, I could have 1 to 80 filters. In my code I basically go off and load the drop down options for everything on the right, problem is it calls the change event for everything on the right :O Ideas anyone?

A more complicated example (closer to my code

I actually have a filter collection, self.FilterCollection , each filter has the following:

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.

In a rather awkward scenario,

1. A user has a CITY selected
2. They select a COUNTRY
3. The CITY list is update
4. Thus resetting the current value**

Number 4 will trigger a subscription I believe...

A Full Scenario

There are 4 drop downs, A, B, C and D.

When a user selects a value from A, I will iterate through the remaining drop downs and call getValues , this will then update the DropDownValues observable.

Therefore, I want, 1 UI event to fire saying "the user changed drop down a", I then need to make 3 ajax calls to load B, C and D and update the observable array.

My problem is that when the User selects A, it makes 3 ajax calls correctly but upon setting the value of B it triggers the event...

This then means B will make 2 ajax calls to update C and D. So when a user selects something in drop down A it actually fires:

1 UI event, 3 Ajax calls, 1 UI event, 2 ajax calls, 1 UI event, 1 ajax call and then one final UI event. So to sumarize, one click by the user makes 4 UI event calls and 6 ajax calls :(

Answer 1

I've got a gut feeling you've oversimplified to ask the question, but as it stands there are two main points to make about your repro:

1. You're subscribing to a DOM event. No need for that: use a view model based subscription instead. It'll give you a lot more control and allow you to unit test it as well.
2. You're calling IChanged on changing the Cities dropdown, which makes no sense. Why update the list of available cities when the user changes that city?

Anyways, here's a way to prevent the looping update:

 function GoGetMyOptions(country) { console.log("Doing ajaxy stuff"); return { done: function(callback) { if (country === "USA") callback(["New York", "LA", "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> 

As you can see on the console, no Ajax calls would happen when changing the City, only when changing the country.