नॉकआउटज - विकल्प

Question

के बजाय foreach का उपयोग करते समय चयन मूल्य के लिए दो तरह से बाध्यकारी खो गया है मेरे पास दो चयन नियंत्रण हैं।

एक दूसरे पर निर्भर है। एक साधारण उदाहरण के लिए, मान लीजिए कि पहले शहरों की सूची प्रदर्शित होती है, जबकि दूसरा प्रत्येक शहर में सड़कों की एक सूची प्रदर्शित करता है।

जब पृष्ठ प्रारंभ में लोड होता है, तो सड़कों को प्रदर्शित करने का चयन नियंत्रण सभी उपलब्ध सड़कों को दिखा रहा है। हालांकि, जब उपयोगकर्ता पहले चयन में कोई शहर चुनता है, तो दूसरा चयन केवल चयनित शहर से संबंधित सड़कों को प्रदर्शित करने के लिए फ़िल्टर किया जाता है।

यह बाध्यकारी विकल्पों का उपयोग करते समय ठीक काम करता है, हालांकि, मुझे ऑप्टग्रुप उत्पन्न करने की क्षमता की आवश्यकता है और बाध्यकारी विकल्प इसका समर्थन नहीं करते हैं, इसलिए मुझे फ़ोरैच बाइंडिंग का उपयोग करना होगा।

नतीजा यह है कि जब भी कोई शहर चयन किया जाता है, दो अनपेक्षित परिणाम होते हैं है:

1. दूसरे का चयन करें (फ़िल्टर किए गए सड़कों की सूची), चुने हुए चयनित शहर के पहले सड़क के लिए भले ही दिखाई देते हैं मैं मैं valueAllowUnset का उपयोग कर रहा हूँ: सच। यह दृश्य मॉडल
2. वास्तव में दूसरे चयन में एक सड़क चुनते समय और पहले चयन में एक अलग शहर चुनने पर, सूची में परिवर्तनों को दर्शाने के लिए सही ढंग से दूसरा चयन अपडेट चुनता है, लेकिन दृश्य मॉडल में दिखाई नहीं देता है ऐसा नहीं करता है, इस प्रकार पहले भी चयनित मूल्य को बनाए रखता है (भले ही यह सूची में नहीं है)। यहां तक ​​कि यदि मैं valueAllowUnset को हटाता हूं: दूसरे चयन से सच है, तो समस्या अभी भी बनी हुई है।

क्या इस मुद्दे पर कोई कामकाज है? मुझे वास्तव में विकल्प बाध्यकारी के बजाय foreach बाध्यकारी का उपयोग करना होगा।

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> 

अब अपने व्यू मॉडल की चयनित सिटी संपत्ति की सदस्यता लें। जब भी यह बदलता है, प्रोग्रामेटिक रूप से चयनित स्ट्रीट को '' पर सेट करें।

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

इस तरह आप अपने दोनों मुद्दों को हल कर सकते हैं।

आपके पहेली में बदलाव किए और यह काम करता है। इसे अद्यतन करने की कोशिश करता है। https://jsfiddle.net/Shabi_669/w1vcjbjo/