Knockoutjs - seçenekler yerine foreach kullanırken değer seçmek için iki yönlü ciltleme kaybetti

Question

İki seçim denetime sahibim.

Biri diğerine bağımlıdır. Basit bir örnek için, ilk görüntülerin bir şehir listesi olduğunu varsayalım, diğeri ise her şehirdeki sokakların bir listesini görüntüler.

Sayfa başlangıçta yüklendiğinde, sokakları gösteren seçim denetimi, tüm kullanılabilir sokakları gösterir. Ancak, kullanıcı ilk seçimde bir şehir seçtiğinde, ikinci seçim yalnızca seçilen şehre ait sokakları görüntülemek için filtrelenir.

Bu seçenek, bağlama seçeneklerini kullanırken Tamam, ancak, optgroups oluşturma yeteneğine ihtiyacım var ve bunu desteklemiyor seçenekleri bağlama desteklemiyor, bu yüzden foreach bağlamayı kullanmam gerekiyor.

sonucu şehir seçildiğinde, iki istenmeyen sonuçlar meydana şudur:

1. ikinci seçme (sokakların süzülmüş listesi) olsa bile, seçilen seçilen şehrin ilk sokak var görünüyor ben valueAllowUnset kullanarak: true. Bu görünüm modeline yansıtılmıyor
2. İkinci seçimde bir sokak seçerken ve ilk seçimde farklı bir şehir seçerken, ikinci seçim, listedeki değişiklikleri yansıtmak için doğru şekilde güncelleştirir, ancak görünüm modeli bu nedenle, daha önce seçilen değeri hala koruyamaz (artık listede bulunmasa bile). Hatta valueAllowUnset'i kaldırsam bile: ikinci seçimden true, sorun hala devam ediyor.

Bu sorunla ilgili bir çözüm var mı? Gerçekten de foreach bağlayıcısını seçenek ciltleme yerine kullanmak zorundayım.

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

İlk olarak, seçme girişine boş seçeneği eklemek.

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

Şimdi görünüm modelinizin selectedCity özelliğine abone olun. Her değiştiğinde, programlı olarak selectedStreet öğesini '' olarak ayarlayın.

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

hem sorunlarınızı çözebilir Bu şekilde.

Kemandaki değişiklikleri yaptınız ve çalışıyor. güncellemeye çalışır. `ValueAllowUnset` kullanırken boş seçeneği eklemek gerekmez https://jsfiddle.net/Shabi_669/w1vcjbjo/