javascript - Knockoutjs-विकल्प के बजाय foreach का उपयोग करते समय मूल्य का चयन करने के लिए दो तरह से बाध्य किया गया



knockout.js data-binding (1)

मेरे पास दो चुनिंदा नियंत्रण हैं

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

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

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

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

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

क्या इस मुद्दे पर कोई उपाय है? मुझे बाइंडिंग विकल्पों के बजाय 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);

सबसे पहले, अपने चयन इनपुट में खाली विकल्प जोड़ें

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

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

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

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

अपने बेला में परिवर्तन किया और यह काम करता है इसे अपडेट करने की कोशिश करता है

यहां बेला है - https://jsfiddle.net/Shabi_669/w1vcjbjo/





viewmodel