javascript - Knockoutjs - 在使用 foreach 而不是选项时丢失了选择值的两种绑定(bind)方式

Question

我有两个选择控件。

一个人依赖另一个人。举个简单的例子，假设第一个显示城市列表，而另一个显示每个城市的街道列表。

当页面最初加载时，显示街道的选择控件会显示所有可用的街道。然而，一旦用户在第一次选择中选择了一个城市，第二次选择就会被过滤以仅显示属于所选城市的街道。

这在使用选项绑定(bind)时工作正常，但是，我需要生成 optgroups 的能力，而选项绑定(bind)不支持它，所以我必须使用 foreach 绑定(bind)。

结果是，无论何时选择一个城市，都会发生两个意想不到的后果:

1. 第二个选择(过滤后的街道列表)似乎选中了所选城市的第一条街道，即使我使用的是 valueAllowUnset: true。 这没有反射(reflect)在 View 模型中
2. 当在第二次选择中实际选择一条街道，然后在第一次选择中选择不同的城市时，第二次选择会正确更新以反射(reflect)列表中的更改，但 View 模型不会，因此仍保留先前选择的值(即使它不再在列表中)。即使我从第二个选择中删除 valueAllowUnset: true，问题仍然存在。

这个问题有解决办法吗？我真的必须使用 foreach 绑定(bind)而不是选项绑定(bind)。

JSFiddle:https://jsfiddle.net/jfxovLna/13/

var ViewModel = function() {

var self = this;

var regionAndCityArray = [{
 regionName: "Europe",
 cities: [{
   cityName: "London",
   additionalUnimportantInformation: 100
 }, {
   cityName: "Paris",
   additionalUnimportantInformation: 200
 }]
}, {
 regionName: "North America",
 cities: [{
   cityName: "New York",
   additionalUnimportantInformation: 45
 }]
}];

var cityAndStreetArray = [{
 cityName: "London",
 streets: [{
   streetName: "Parker",
   streetLength: 5
 }, {
   streetName: "Macklin",
   streetLength: 10
 }, ]
}, {
  cityName: "New York",
 streets: [{
   streetName: "5th Avenue",
   streetLength: 3
 }, {
   streetName: "Park Ave",
   streetLength: 12
 }]
}, {
  cityName: "Paris",
 streets: [{
   streetName: "Rue de Turbigo",
   streetLength: 11
 }, {
   streetName: "Rue aux Ours",
   streetLength: 12
 }]
}];

var getAvailableStreets = function() {

 var availableStreets = cityAndStreetArray;

 var selectedCity = self.selectedCity();

 var selectedRegion = _.find(regionAndCityArray,
   function(region) {
     return _.find(region.cities,
       function(city) {
         return city.cityName === selectedCity;
       });
   });

 if (selectedRegion == undefined) {
   return availableStreets;
 }

 var filteredStreets = _.filter(cityAndStreetArray,
   function(city) {
     return city.cityName === selectedCity;
   });

 return filteredStreets;
}

self.availableCities = ko.observableArray(regionAndCityArray);
self.selectedCity = ko.observable();
self.availbleStreets = ko.computed(getAvailableStreets);
self.selectedStreet = ko.observable();

};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

Answer 1

首先，向您的选择输入添加一个空选项。

<option value="">Select Street</option>

现在订阅 View 模型的 selectedCity 属性。每当它发生变化时，以编程方式将 selectedStreet 设置为“”。

viewModel.selectedCity.subscribe(function() { 
  viewModel.selectedStreet(''); 
}, viewModel); 

这样您就可以同时解决这两个问题。

在您的 fiddle 中进行了更改并且它起作用了。尝试更新它。

这是一个 fiddle - https://jsfiddle.net/Shabi_669/w1vcjbjo/